html - 调整大小时图像的响应高度

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>

样式:

.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>