響應式圖像問題

這些是約束條件：圖像必須始終保持其原始高寬比。如果父容器的寬度太小，則調整圖像的大小以適應其內容。圖像的最大高度爲400像素。圖像的最大寬度是父容器的寬度。問題：圖像在受到父寬度限制時不能保持寬高比。這裏是CSS我：響應式圖像問題

img.myImage { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:400px; 
}

編輯：要增加難度，這是父組件：

div.programContainer { 
    width: 100%; 
    max-width: 1300px; 
    padding: 10px; 
    text-align: left; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

編輯：解決方法： 對不起，這沒有什麼可如何處理圖像本身，刪除父容器中不必要的彈性框可以解決問題。

來源

2016-08-30 Daniel Williams

我使用寬度：100％所有的時間。你試過這個嗎？ –

100％寬度將圖像水平延伸並調整縱橫比。 –

正如@EdangJeorlie所說，在瀏覽器調整大小時，您需要width: 100%來調整圖像的大小。一個例子是JSBin上的here。

就像是單挑，我相信你可以擺脫height: auto，因爲這將是默認設置。希望這可以幫助！

來源

2016-08-30 02:18:33

我需要這樣做，而不用指定像素的最大寬度。原始圖像的寬度可能因圖像而異。寬度需要自動計算。 –

@DanielWilliams：我認爲你現在排序了嗎？ –

是的，我已經解決了我自己的問題。我原來的圖像代碼是正確的。 –

您可以使用CSS這樣的：

.img-responsive{ 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
}

<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">

來源

2017-07-31 09:54:12

響應式圖像問題

回答

相關問題