響應式圖像列表

我需要實現圖像的CSS（附件）。 Gallery 響應式圖像列表

我從第三方檢索6張圖片。我需要顯示圖像，以便所有6個圖像以不同的屏幕寬度顯示。我只爲屏幕寬度> 1024像素進行優化。因此，如果屏幕寬度小於1024像素，則圖像大小與圖像大小爲1024像素相同。 2張圖像的寬高比爲1：1。兩個長寬比爲4：3。兩個的長寬比爲16：9。

如何使用CSS顯示圖像，以便在屏幕變得更小（寬度最大爲1024px）時顯示所有圖像並保持縱橫比？基本上，你將如何實現CSS來使這一行圖像響應？

現在，我有以下結構：

<article class="sample"> 
<img src ="ex1.jpg" /> 
</article> 
<article class="sample"> 
<img src ="ex2.jpg" /> 
</article> 
<article class="sample"> 
<img src ="ex3.jpg" /> 
</article> 
<article class="sample"> 
<img src ="ex4.jpg" /> 
</article>

所有的圖像都需要具有相同的高度，同時保持其縱橫比。

我在「sample」元素上使用了內聯塊。我爲每個屏幕寬度斷點（1024，1280，1440）的所有圖像設置了一個高度，並將寬度設置爲自動。

所以在1024，我設置img的高度爲150px。在1280年，我將高度設置爲160px。在1440px處，我將img的高度設置爲166px。給我建議將高度設置爲Xvw，而不是爲每個斷點設置高度。

來源

2016-01-21 Kot Yat

使用百分比設置一個維度，另一個使用auto。例如：

img{width:100%;height:auto;}

jsFiddle Demo

來源

2016-01-21 18:23:07 gibberish

我假設你正在試圖重建類似的東西到你的畫廊，我想過使用的CSS顯示：彎曲性能。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

下面的代碼：

HTML：

<div class="container"> 
    <div class="article" style="flex-grow: 1.77"> 
    <img src="http://www.lorempixel.com/177/100" alt=""> 
    </div> 
    <div class="article" style="flex-grow: 1"> 
    <img src="http://www.lorempixel.com/100/100" alt=""> 
    </div> 
    <div class="article" style="flex-grow: 1.33"> 
    <img src="http://www.lorempixel.com/133/100" alt=""> 
    </div> 
    <div class="article" style="flex-grow: 1" > 
    <img src="http://www.lorempixel.com/100/100" alt=""> 
    </div> 
    <div class="article" style="flex-grow: 1.77" > 
    <img src="http://www.lorempixel.com/177/100" alt=""> 
    </div> 
    <div class="article" style="flex-grow: 1.33"> 
    <img src="http://www.lorempixel.com/133/100" alt=""> 
    </div> 
</div>

CSS：

.container { 
    display: flex; 
    width: 100%; 
    min-width: 1024px; 
} 

.article img { 
    width: 100%; 
    height: auto; 
}

小提琴：

https://jsfiddle.net/xmqLrtbk/

來源

2016-01-21 18:39:33

我需要圖像的高度相同。 –

如何保持每個圖像的高度相同並仍然保持縱橫比 –

此小提琴使用相同高度但不同高寬比的圖像，您可以通過打開任何圖像編輯器程序和更改高度將所有圖像轉換爲標準，例如500像素，將高寬比鎖定。 –

響應式圖像列表

回答

相關問題