我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
当前回答
实际上,我最近遇到了同样的问题,最后用了一个稍微不同的方法(我不能使用背景图像)。它确实需要一点jQuery来确定图像的方向(我相信你可以使用纯JS代替)。
我写了一篇关于它的博客文章,如果你有兴趣更多的解释,但代码非常简单:
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');
}
});
});
其他回答
如果图像在一个具有响应宽度的容器中:
.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) (编辑:添加了虚拟图像供参考)
查看CSS的纵横比
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square-image { 宽度:50%; 背景图片:url (https://picsum.photos/id/0/367/267); background-size:封面; 背景位置:中心; 比例:1/1; } < div class = "方形图像“> < / div >
您也可以使用常规的img标签,如下所示
.square-image { 宽度:50%; object-fit:封面;/*需要防止图像拉伸,使用对象位置属性调整可见区域*/ 比例:1/1; } < img src = " https://picsum。照片/ id / 0/367/267”class = "方形图像" / >
一个纯CSS解决方案,没有包装div或其他无用的代码:
img {
object-fit: cover;
width: 230px;
height: 230px;
}
使用CSS: overflow:
.thumb {
width:230px;
height:230px;
overflow:hidden
}
现在你可以使用纵横比:
img {
aspect-ratio: 1 / 1;
}
它在现代浏览器中也有广泛的支持: https://caniuse.com/mdn-css_properties_aspect-ratio