如何用CSS“裁剪”一个矩形图像成一个正方形?

我知道用CSS修改图像是不可能的，这就是为什么我把裁剪放在引号里的原因。

我想做的是采用矩形图像，并使用CSS使它们看起来像正方形，而不扭曲图像。

我想把这个:

到这个:

当前回答

如果图像在一个具有响应宽度的容器中:

.rect-img-container { 位置:相对; ｝ {后.rect-img-container:: 内容:“”; 显示:块; padding-bottom: 100%; ｝ .rect-img { 位置:绝对的; 宽度:100%; 高度:100%; object-fit:封面; ｝ < div class = " rect-img-container”> <img class="rect-img" src="https://picsum。照片/ id / 0/367/267”alt = " " > < / div >

(编辑:从sass更新为纯css) (编辑:添加了虚拟图像供参考)

2019-05-03 08:49:28

其他回答

如果图像在一个具有响应宽度的容器中:

(编辑:从sass更新为纯css) (编辑:添加了虚拟图像供参考)

2019-05-03 08:49:28

把你的图像放在一个div中。给你的div显式的正方形尺寸。将div的CSS overflow属性设置为hidden (overflow:hidden)。将您的想象放在div中。利润。

例如:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

2013-03-01 22:02:19

使用background-size:cover - http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}

标记:

<div class="image-container"></div>

2015-02-23 11:48:30

现在你可以使用纵横比:

img {
   aspect-ratio: 1 / 1;
}

它在现代浏览器中也有广泛的支持: https://caniuse.com/mdn-css_properties_aspect-ratio

2022-09-16 08:37:02

可以使用. testg类中的正方形尺寸的div:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

或者一个正方形的div与图像的背景。

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

这里有一些例子:http://jsfiddle.net/QqCLC/1/

更新以便图像中心

test { 宽度:307 px; 身高:307 px; 隐藏溢出: ｝ .testimg { margin-left: -76像素｝ .test2 { 宽度:307 px; 身高:307 px; background: url(http://i.stack.imgur.com/GA6bB.png ｝ <div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class=" testg " /></div> < div class = " test2 " > < / div >

2013-03-01 22:13:48

如何用CSS“裁剪”一个矩形图像成一个正方形?

推荐文章

最新文章

标签