響應圖像的寬度不一，高度一致

我傾吐了早期的答案，但似乎無法找到確切的答案。響應圖像的寬度不一，高度一致

我正在尋找創建一個容器股利，保存不同寬度的圖像與一個共同的餘地。我想保持一致的高度，因爲隨着div的寬度由於瀏覽器尺寸的擴大和縮小而調整圖像大小。

我有一個的jsfiddle，但不能弄明白：https://jsfiddle.net/s8p4wv8m/

max-width: 100%; 
height: auto;

有什麼用高度我失蹤？

我可以獲得響應部分，但我期望在瀏覽器調整大小時使所有圖像的高度保持一致而不影響寬高比。

圖像不一定會在網格系統上 - 它們的寬度會變化。

非常感謝。

來源

2016-12-21 user3808123

在你的小提琴中，圖像的高度在彼此之間是一致的。我錯過了什麼嗎？ – Nimrod

添加「max-height：62px;」到圖像限制所有圖像的最短圖像的高度，因此在你的小提琴的例子...是「62px」。 – vicgoyso

這是一個更接近版本https://jsfiddle.net/5h54f2co/4/。目前，隨着瀏覽器窗口尺寸縮小，圖像響應，它們保持縱橫比，但是它們以不同的速率降低，並且我無法獲得工作邊界的權利。理想情況下，他們都會以同樣的速度縮小尺寸，保持縱橫比並保持一致的高度。 – user3808123

您可以添加「max-height：62px;」所有的圖像限制到最短的圖像的高度，因此在你的小提琴的例子...是「62px」

來源

2016-12-21 18:56:20 vicgoyso

謝謝 - 有一個問題 - 當我更新小提琴時 - 他們確實拍到相同的高度，但是當我縮小它時，較窄的圖像開始比水平圖像縮小更多 - 是否有一種方法可以糾正那？ – user3808123

這是你在找什麼？

圖像將隨窗口調整大小。

此外：您的小提琴中的圖像將始終有高度匹配問題，有些是肖像，有些是風景），除非您確定他們正在裁剪。

.row { 
 
    width: 100%; 
 
} 
 

 
.fluid-width-fixed-space img { 
 
    margin: 2% auto; 
 
    display: block; 
 
    height: auto; 
 
    border: 1px solid #000; 
 
    max-width: 100% 
 
}

<div class="row"> 
 
    <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/550x150"> 
 
    <img src="http://placehold.it/150x250"> 
 
    <img src="http://placehold.it/340x115"> 
 
    <img src="http://placehold.it/800x550"> 
 
</div>

來源

2016-12-21 19:05:11

這會給所有圖像100％和刻度高度的寬度，但是如果圖像高度高，則作物最大高度也不會被顯示。

<div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> <div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> 


.crop{ 
    position: relative; 
    overflow: hidden; 
    max-height: 200px; 
    display: block; 
    overflow: hidden; 
} 

.crop img{ 
    width:100% 
}

來源

2016-12-22 13:56:51

響應圖像的寬度不一，高度一致

回答

相關問題