Question

<div class="myImages">
    <%= image_tag data["images"].first["source"] %>
</div>

.myImages {
    width: 100px;
    height: 100px;
    background-color: black;
    overflow: hidden;
}

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

这几乎完全按照我需要的方式工作，除了宽度最初大于100px的图像仅从右边裁剪而不是从左边和右边裁剪。

我从具有可变尺寸的API中提取了许多图像，我想在一个页面上显示它们。如果宽度小于100px，div的边用黑色填充，我喜欢。但是，对于那些宽度大于100px的图像，我想平均裁剪左侧和右侧，直到它为100px。

例如，如果这是宽度大于100px的照片

＆LT; --------------------照片------------------------ ---＆GT;

以这种方式裁剪：

＆LT; - 裁剪 - ＆GT;＆LT; ------- ------照片＆GT;＆LT; - 裁剪 - ＆GT;

有办法吗？

更新，我最终使用的内容：

.myImages {
    width: 100px;
    height: 100px;
    background-color: black;
    overflow: hidden;
}

.myImages img {
    width: 100%;
    height: 100px;  
    object-fit: cover;
}

Answer 1

使用属性object-fit: cover。有关示例，请参阅this。

如何使用css从左右裁剪图像而不知道尺寸

1 个答案: