如何制作响应式图像？

Question

如何制作响应式图片？
我会上传不同尺寸的照片！
有必要在保持比例的同时拉伸照片的长度和宽度。
当页面缩小时，照片也应该缩小，但要保持比例。
11:6 宽高比的图像。
我做不到..
我也尝试在 flexbox 上这样做，但没有奏效。
请告诉我如何做到这一点。可以在 CSS 网格或 flexbox 上

.row {
    margin: -10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(auto, 100%);
}

.card {
    margin: 5px;
    border: 1px solid #000;
    // width: 100%;
    // height: 100%;
}

.card-img {
    width: 100%;
    height: 33%;
}

.image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.img1 {
    background-image: url(https://get.pxhere.com/photo/iphone-tree-nature-forest-grass-photography-fall-spring-green-phone-autumn-season-cellphone-photograph-image-habitat-21965.jpg);
}

.img2 {
    background-image: url(https://cs8.pikabu.ru/post_img/2016/06/08/9/og_og_146539895626849533.jpg);
}

.img3 {
    background-image: url(https://get.pxhere.com/photo/iphone-tree-nature-forest-grass-photography-fall-spring-green-phone-autumn-season-cellphone-photograph-image-habitat-21965.jpg);
}

.img4 {
    background-image: url(https://cs8.pikabu.ru/post_img/2016/06/08/9/og_og_146539895626849533.jpg);
}

<div class="row">
    <div class="card">
        <div class="card-img">
            <img class="image img1" alt="">
        </div>
        <div class="card-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="image img2" alt="">
        </div>
        <div class="card-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="image img3" alt="">
        </div>
        <div class="card-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="image img4" alt="">
        </div>
        <div class="card-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
        </div>
    </div>
</div>

Answer 1

如果可以支持object-fit:

1. 删除包装.card-img 元素
2. 把图片url直接放在图片上：<img src="...">
3. 在.image 元素集height、width 和object-fit: contain;

.row {
  margin: -10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(auto, 100%);
}

.card {
  margin: 5px;
  border: 1px solid #000;
}

.image {
  width: 100%;
  height: 33%;
  object-fit: contain;
}

<div class="row">
  <div class="card">
    <img class="image" alt="" src="https://get.pxhere.com/photo/iphone-tree-nature-forest-grass-photography-fall-spring-green-phone-autumn-season-cellphone-photograph-image-habitat-21965.jpg">
    <div class="card-description">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
    </div>
  </div>
  <div class="card">
    <img class="image" alt="" src="https://cs8.pikabu.ru/post_img/2016/06/08/9/og_og_146539895626849533.jpg">
    <div class="card-description">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
    </div>
  </div>
  <div class="card">
    <img class="image" alt="" src="https://get.pxhere.com/photo/iphone-tree-nature-forest-grass-photography-fall-spring-green-phone-autumn-season-cellphone-photograph-image-habitat-21965.jpg">
    <div class="card-description">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
    </div>
  </div>
  <div class="card">
    <img class="image" alt="" src="https://cs8.pikabu.ru/post_img/2016/06/08/9/og_og_146539895626849533.jpg">
    <div class="card-description">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur!
    </div>
  </div>
</div>

Answer 2

这是一个完整的解决方案！
这将保持图像的纵横比，并且它们现在是自适应的。

您需要将属性 (position: relative;) 添加到父级 (class="card-img")。
并且还将底部填充添加到父级（填充：0% 0% 50% 0%;），50% 是图像将从底部压缩多少。
图片 (img) 需要相对于其父级 (class="card-img") 进行绝对定位，(position: absolute; top: 0 ; left: 0;).，一定要设置高度和宽度（height: 100%; width: 100%;）。 另外，为了让图片拉伸到盒子的全宽和全高，你需要设置 (object-fit:cover;) 属性，这个属性类似于“ 背景尺寸：封面；”。 此外，您可以设置 (object-position: center;) 属性使图像居中，该属性类似于“background-position: center;"。

.row {
    margin: -10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(auto, 100%);
}

.card {
    margin: 5px;
    border: 1px solid #000;
}

.card-img {
    position: relative;
    padding: 0% 0% 58% 0%;
}

.card-img img {
    position: absolute;
    object-position: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

<div class="row">
    <div class="card">
        <div class="card-img">
            <img class="img1" src="https://get.pxhere.com/photo/iphone-tree-nature-forest-grass-photography-fall-spring-green-phone-autumn-season-cellphone-photograph-image-habitat-21965.jpg" alt="">
        </div>
        <div class="card-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sunt nam cumque fugiat, fuga enim, obcaecati, vel, similique numquam alias qui nisi cum? Porro quibusdam, labore! Porro voluptas quisquam, earum!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="img2" src="https://i.pinimg.com/originals/7f/0e/52/7f0e525bd01b7ce821daa61da6d2a8b8.jpg" alt="">
        </div>
        <div class="card-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sunt nam cumque fugiat, fuga enim, obcaecati, vel, similique numquam alias qui nisi cum? Porro quibusdam, labore! Porro voluptas quisquam, earum!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="img3" src="https://cs8.pikabu.ru/post_img/2016/06/08/9/og_og_146539895626849533.jpg" alt="">
        </div>
        <div class="card-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sunt nam cumque fugiat, fuga enim, obcaecati, vel, similique numquam alias qui nisi cum? Porro quibusdam, labore! Porro voluptas quisquam, earum!
        </div>
    </div>
    <div class="card">
        <div class="card-img">
            <img class="img4" src="https://cdn.pixabay.com/photo/2018/05/10/19/36/the-atlantic-ocean-3388522_1280.jpg" alt="">
        </div>
        <div class="card-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sunt nam cumque fugiat, fuga enim, obcaecati, vel, similique numquam alias qui nisi cum? Porro quibusdam, labore! Porro voluptas quisquam, earum!
        </div>
    </div>
</div>