我可以有一个具有设定高度的响应式图像吗？

Question

我在页面构建器中工作 对于一家商店，我正在创造。我可以改变 CSS，这很棒。

我正在努力调整这 4 列行中图像的响应大小。由于图像的高度不同，我必须设置高度并具有响应宽度。有什么办法让它正确缩放吗？

宽度是自动的，高度是根据屏幕尺寸设置的高度。

您可以看到，当我调整大小时，它会与盒子分离，然后有时会被压扁。

Answer 1

object-fit 属性

我通过使用 display : flex; 和 object-fit : cover; 属性完成了您的设计。我认为直接在图像上的这个 object-fit 属性是唯一缺少的属性，可以让你的图像在屏幕分辨率不同的情况下仍然看起来不错。

请注意 object-position : center; 的使用，这使得调整大小始终在图像的中心进行。

---

索引.html

<div class="foo">
    <div class="bar">
        <img src="https://picsum.photos/200/300" alt="">
        <div>
            <h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
            <p>$42</p>
        </div>
    </div>

    <div class="bar">
        <img src="https://picsum.photos/500/200" alt="">
        <div>
            <h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
            <p>$42</p>
        </div>
    </div>
    
    <div class="bar">
        <img src="https://picsum.photos/200/700" alt="">
        <div>
            <h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
            <p>$42</p>
        </div>
    </div>

    <div class="bar">
        <img src="https://picsum.photos/500/400" alt="">
        <div>
            <h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
            <p>$42</p>
        </div>
    </div>
</div>

样式.css

body {
    background-color: #f7f7f7;
    font-family: Arial, Helvetica, sans-serif;
}

.foo {
    width: 100%;
    display: flex;
    gap: 20px;
}

.bar {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.bar > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

h4 {
    color:#9ccf74;
}

.bar > div {
    padding: 10px;
    height: 100px;
}