Question

我想将具有随机大小的图像裁剪为方形宽高比。我只是想使用CSS并希望它能够自动响应并自动调整witdth和height。

css剪辑功能不适用于百分比。（我使用自举网格）

还有其他方法吗？

感谢您的帮助和提示

Answer 1

最简单的方法是设置固定的宽度和高度以及背景大小的封面。

.responsive-image {
    background-size: cover;
    background: url("url_of_the_image") 50% 50% no-repeat scroll transparent;
}
@media (max-width: 600px) {
    .responsive-image {
        height: 200px;
        width: 200px;
    }
}
@media (max-width: 800px) {
    .responsive-image {
        height: 400px;
        width: 400px;
    }
}

我不是100％确定语法

Answer 2

您可以使用background-image通过cover background-size来完成此操作。

<强> DEMO

在演示中，我使用an image with rectangular dimensions（400x200），但div元素的height和width 200px。< / p>

使用cover值可以保持图像的原始宽高比并覆盖元素的可见区域，基本上裁剪图像。

div {
  background: #2a2828 url("http://lorempixel.com/400/200/") no-repeat center center/cover;
  height: 200px;
  width: 200px;
}

<div>
</div>

CSS将图像裁剪为正方形

2 个答案: