如何使圖像與網頁瀏覽器窗口的大小成比例地縮放？

我的問題如下。當我調整瀏覽器窗口的大小時，中間的圖像將降至其他兩個以下的其他圖像。如何使圖像與網頁瀏覽器窗口的大小成比例地縮放？

它的形象，而工作：Working website image
圖片的它，當瀏覽器變得更小：Broken Website Image
情況與此相同的顯示器比較小，我的代碼是波紋管：

CSS: 

.content { 
padding-top:50px; 
text-align: center; 
} 
.samp{ 
float: left; 
width: 188px; 
height: 356px; 
margin-top: 50px; 
margin-right: 0px; 
margin-bottom: 5px; 
margin-left: 320px; 
} 
.multiv{ 
float: left; 
width: 247px; 
height: 431px; 
margin-top: 100px; 
margin-right: 0px; 
margin-bottom: 5px; 
margin-left: 60px; 
} 
.minecraft{ 
float: right; 
width: 234px; 
height: 327px; 
margin-top: 73px; 
margin-right: 280px; 
margin-bottom: 5px; 
margin-left: 0px; 
}

有3圖片我剛剛讓他們留在中間區域的一個地方，並用瀏覽器調整大小。

來源

2014-02-15 Mr.Blue

嘿，這是很難給沒有工作的例子一個確切的解決方案，但你需要包裝 – brendosthoughts

改變你的代碼與此，兄弟......

.content { 
    padding-top:50px; 
    text-align: center; 
    white-space: nowrap; 
} 

.samp, .minecraft, .multiv{ 
    vertical-align: top; 
    display: inline-block; 
} 

.samp{ 
width: 247px; 
margin-top: 50px; 
margin-right: 0px; 
margin-bottom: 5px; 
margin-left: 320px; 
} 
.multiv{ 
width: 247px; 
height: 431px; 
margin-top: 100px; 
margin-right: 0px; 
margin-bottom: 5px; 
margin-left: 60px; 
} 
.minecraft{ 
width: 234px; 
height: 327px; 
margin-top: 73px; 
margin-right: 280px; 
margin-bottom: 5px; 
margin-left: 0px; 
}

它會給你一個堅實的包裝與沒有進行轉換，你可以從那裏調整它：F

來源

2014-02-15 22:44:45 BruceWayne

的寬度的相對百分比來定位每個圖像該jfiddle是... http://jsfiddle.net/3mAh3/ 我還沒有找到答案，所以請幫助！ –

增加了一個編輯！ – BruceWayne

不使用浮動，簡單地使用width:33.3%，和height:auto

實施例：

http://fiddle.jshell.net/Ft3p4/

來源

2014-02-15 22:47:41 ProllyGeek

浮動是現代網絡的瘟疫 - 哦多麼普遍，但通常哦多麼多餘。 – Nit

我們在這裏談論的不是一個標準的案例，對吧？ – ProllyGeek

一般使用float通常是一個糟糕且不必要的做法。有很好的論證用途。 – Nit

您可以按照relative和absolute的定義和塊以百分比爲基礎的寬度進行操作。

結果：http://jsfiddle.net/3mAh3/2/

我給它所有的包裝（.collection類）和風格的使用該類所有div S，可以調整它幾乎任何東西，它也將重疊，很好地感謝z-index

HTML

<div class="content"> 
<div class="collection"> 
    <div class="samp"> 
    <a href="index.html"><img src="http://therealmgaming.com/images/samp.png" /></a> 
    </div> 
    <div class="multiv"> 
    <a href="index.html"><img src="http://therealmgaming.com/images/multiv.png" /></a> 
    </div> 
    <div class="minecraft"> 
    <a href="index.html"><img src="http://therealmgaming.com/images/minecraft.png" /></a> 
    </div> 
</div> 
</div>

CSS：

.content { 
    padding-top: 50px; 
    text-align: center; 
} 
.collection { 
    position: relative; 
    width: 100%; 
} 
.collection div { 
    position: absolute; 
    width: 33%; 
} 
.multiv { 
    top: 50px; 
    left: 33%; 
    z-index: 2; 
} 
.samp { 
    left: 0; 
    z-index: 1; 
} 
.minecraft { 
    top: 30px; 
    right: 0; 
    z-index: 1; 
}

您可以安全地刪除.collection和風格取決於.content其他內容添加到.content，但這時別忘了改變.collection div到.content div爲好。

例子：http://jsfiddle.net/3mAh3/4/

或者更好：http://jsfiddle.net/3mAh3/5/

來源

2014-02-15 23:55:17 Marcel

如何使圖像與網頁瀏覽器窗口的大小成比例地縮放？

回答

相關問題