當縮小瀏覽器頁面而不中斷到新行時自動調整圖片大小

我有3個圖像水平堆疊（每個圖像都是下一個）。我的目標是在縮小頁面大小時保持水平堆疊的圖像。我希望圖片能夠自動調整大小，而不會將其摺疊到下一行。我不想使用百分比（％）作爲圖像的大小。我根本不想設置圖像的大小。當縮小瀏覽器頁面而不中斷到新行時自動調整圖片大小

當我使用引導程序並縮小頁面時，當頁面尺寸變小，然後圖片大小那麼右側的圖片會切換到新行，第二張圖片會發生同樣的情況，直到所有圖像垂直堆疊。在這一點上，當我縮小頁面時，我得到了我想要的 - 圖片根據頁面大小調整大小。

請幫助我得到這種行爲，而不用將照片換成新線。

這是我的html：

<body> 
    <img src="img/test.png" /> 
    <img src="img/test.png" /> 
    <img src="img/test.png" /> 
</body>

謝謝...

來源

2013-08-16 user2689396

請提供一個[SSCCE]（http://www.sscce.org/） – Simone

搜索位可能會幫助，檢查這個答案：http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-昌 –

@media (min-width:450px;){ 
    img{ 
     width:50%;/*or whatever floats your boat*/ 
    } 
}

您可以修改min-width:值以自定義您的需求。這不會處理大小調整。只是不同的媒體大小。

您可以使用jQuery.resize實際處理調整大小，像這樣一個瀏覽器窗口：

$(window).resize(function(){ 

    var div = $('#images');//images container 
    div.find('img').each(function(k,v){ 

     $(v).width((div.width()/4));//resize each image however you want 
    }); 
});

來源

2013-08-16 22:02:37 bluetoft

環繞你的圖像在任何容器，比如一個div，那麼你必須依賴於行爲的兩個選項，你想：

a）爲容器設置一個css min-width屬性，不要讓它比這更窄。 b）爲容器設置一個css overflow-x屬性，讓圖像隱藏，顯示滾動條，...

來源

2013-08-16 22:05:59 palako

當縮小瀏覽器頁面而不中斷到新行時自動調整圖片大小

回答

相關問題