响应式图像列表

我需要实现图像的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像素，将高宽比锁定。 –

响应式图像列表

回答

相关问题