如何用CSS将矩形图像“裁剪”成正方形？
如何用CSS将矩形图像“裁剪”成正方形？
提问于 2013-03-02 05:58:58
我知道用CSS修改图片是不可能的，这就是为什么我把裁剪放在引号里的原因。
我想要做的是使用CSS使矩形图像看起来是方形的，而不会扭曲图像。
我基本上想把这个转变成：
如下所示：
回答 6
Stack Overflow用户
发布于 2016-08-13 05:45:28
一个没有包装器、div或其他无用代码的纯CSS解决方案：
img {
object-fit: cover;
width:230px;
height:230px;
}Stack Overflow用户
发布于 2015-02-23 19:48:31
使用背景大小: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>Stack Overflow用户
发布于 2014-02-26 03:50:41
实际上，我最近遇到了同样的问题，并最终采用了一种略有不同的方法(我无法使用背景图像)。不过，它确实需要少量的jQuery来确定图像的方向(我确信您可以使用普通的JS来代替)。
如果你对更多的解释感兴趣，我写了一个blog post about it，但是代码非常简单：
HTML：
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>CSS：
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}jQuery：
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15167545
复制相关文章
相似问题