Question

我需要为图像实现CSS（附加）。 Gallery

我从第三方检索了6张图片。我需要显示图像，以便所有6个图像显示在不同的屏幕宽度上。我只是优化屏幕宽度＆gt; = 1024px。因此，如果屏幕宽度小于1024px，则图像的大小与1024px处的图像大小相同。 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>

所有图像都必须具有相同的高度，同时保持其宽高比。

我在＆＃34;示例＆＃34;上使用内联块元件。我为每个屏幕宽度断点（1024,1280,1440）设置了所有图像的高度，并将宽度设置为自动。

所以在1024，我将img的高度设置为150px。在1280，我将高度设置为160px。在1440px，我将img的高度设置为166px。我得到了建议，将高度设置为Xvw而不是为每个断点设置高度。

Answer 1

我假设您正在尝试重新创建类似于您的图库的内容，我考虑使用css display：flex property。

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/

Answer 2

使用百分比设置一个维度，另一个auto设置。例如：

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

jsFiddle Demo

响应式图像列表

2 个答案: