Question

我真的很喜欢响应式图像的短篇小说，我试图制作一个像这样的简单网格

https://avenue-demo.squarespace.com

在此大道网站中，当您调整浏览器大小时，所有图像的高度和宽度都相同，现在图像调整大小很好，这是我的代码

 <ul class="grid">
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
           </a>
      </li>
 </ul>

css：

.grid {
    display: flex;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
    list-style: none;
}
.grid li {
    width: 30%;
}
img {
    max-width: 100%;
}

问题是，当我将img的高度设置为高度100％时，图像的高度不同。是的，图像的高度相同，但是在调整大小时，它们的大小却没有缩小，就像我发布的这个网站一样，修复它？

Answer 1

根据我的理解，即使我对您的代码进行了一些CSS更改，您也需要具有方形图像才能显示出响应速度，以使其看起来像网站中的图像（并非总是建议使用此图像）
这是密码笔链接
https://codepen.io/avreddy/pen/vvabbP

.grid {
    display: flex;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
    list-style: none;
}
.grid li {
    width: 30%;
}
.grid li a{
  position: relative;
  width: 100%;
  padding: 50% 0;
  display : block;
}
.grid li a img{
  position: absolute;
  width : 100%;
  top: 0;
  left: 0;
  height: 100%;
  object-fit : cover;
  
}
img {
    max-width: 100%;
}

<ul class="grid">
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
           </a>
      </li>
 </ul>

调整大小后图像的响应高度

1 个答案: