根據屏幕左側尺寸的圖像

所以我有一個側邊欄是左側（100px），然後右側有一個圖像。調整圖像的大小取決於沒有留下右側的大小是否可行？根據屏幕左側尺寸的圖像

例如：

<div id="sidebar"></div> 
<img src="image" alt="Work"> 

<style> 
#sidebar { 
float: left; 
width: 100px; 
background: red; 
height: 500px; 
} 
img { 
float: left; 
width: 80%; /* This is not working right */ 
} 
</style>

編輯：這樣的例子是 - 如果我的分辨率爲1000像素，然後圖像尺寸寬度爲900px。側欄總是在右側，寬度爲100px。

有小提琴鏈接 - http://jsfiddle.net/qLnZu/4/

來源

2011-11-21 iKaspars

你的「左」有一個固定的寬度，所以你的圖像何時應該調整大小？你的意思是你想讓圖片像側邊欄右側那樣大嗎？ –

我不明白你的問題。我看到您的左側有一個100px寬的側欄，右側有一個圖片。我不明白「根據尺寸大小調整圖像大小是否可行？」你能解釋一下還是讓我看看你想要它看起來像什麼？ –

@CoryDanielson我已將示例添加到我的帖子中。 – iKaspars

紙環繞img標籤一個div：

<div id="sidebar"> 
</div> 
<div id="right"> 
    <img src="http://lorempixel.com/1000/1000/sports/" alt="Work"> 
</div>

而且在CSS：

#sidebar { 
    float: left; 
    width: 100px; 
    background: red; 
    height: 500px; 
} 

#right { 
    margin-left: 100px; //width of sidebar 
} 

#right img { 
    width: 100%; 
}

例如：

http://jsfiddle.net/qLnZu/6/

來源

2011-11-21 15:37:54

不太清楚如何做到這一點沒有的JavaScript。

但我把這個簡單的小提琴放在一起給你。

http://jsfiddle.net/4VrvN/

$('img').width($(window).width() - 100 + 'px');

來源

2011-11-21 15:18:55 Filip

嗯..它的工作原理。只是如果我調整瀏覽器窗口的大小，我必須刷新頁面。但它不是一個巨大的問題。我希望如此...... – iKaspars

您也可以將該代碼綁定到$（window）.resize（）以及！ – Filip

根據屏幕左側尺寸的圖像

回答

相關問題