我知道用CSS修改图像是不可能的，这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像，并使用CSS使它们看起来像正方形，而不扭曲图像。
我想把这个:
到这个:
当前回答
把你的图像放在一个div中。 给你的div显式的正方形尺寸。 将div的CSS overflow属性设置为hidden (overflow:hidden)。 将您的想象放在div中。 利润。
例如:
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>
其他回答
我有一个类似的问题，不能“妥协”的背景图像。 我想到了这个。
<div class="container">
<img src="http://lorempixel.com/800x600/nature">
</div>
.container {
position: relative;
width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
border: 2px solid #fff; /* just to separate the images */
overflow: hidden; /* "crop" the image */
background: #000; /* incase the image is wider than tall/taller than wide */
}
.container img {
position: absolute;
display: block;
height: 100%; /* all images at least fill the height */
top: 50%; /* top, left, transform trick to vertically and horizontally center image */
left: 50%;
transform: translate3d(-50%,-50%,0);
}
//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});
希望这能有所帮助!
例子: https://jsfiddle.net/cfbuwxmr/1/
一个纯CSS解决方案，没有包装div或其他无用的代码:
img {
object-fit: cover;
width: 230px;
height: 230px;
}
如果图像在一个具有响应宽度的容器中:
.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) (编辑:添加了虚拟图像供参考)
把你的图像放在一个div中。 给你的div显式的正方形尺寸。 将div的CSS overflow属性设置为hidden (overflow:hidden)。 将您的想象放在div中。 利润。
例如:
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>
可以使用. 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 >
