我知道用CSS修改图像是不可能的，这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像，并使用CSS使它们看起来像正方形，而不扭曲图像。
我想把这个:
到这个:
当前回答
我用了不同的方法。你基本上需要裁剪矩形图像，使其适合正方形，这就是它的全部。最好的方法是如果图像宽度大于高度，那么你从图像的左边和右边稍微裁剪图像。如果图像高度大于图像宽度，则裁剪图像底部。这是我的解决方案。不过我需要PHP的一点帮助。
<div style="position: relative; width: 154px; height: 154px; overflow: hidden;">
<?php
//get image dimmensions whichever way you like. I used imgaick
$image = new Imagick("myimage.png");
$width = $image->getImageWidth();
$height = $image->getImageHeight();
if($width > $height){
?>
<img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); height: 100%; " />
<?php
}else{
?>
<img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; " />
<?php
}
?>
</div>
其他回答
一个纯CSS解决方案，没有包装div或其他无用的代码:
img {
object-fit: cover;
width: 230px;
height: 230px;
}
把你的图像放在一个div中。 给你的div显式的正方形尺寸。 将div的CSS overflow属性设置为hidden (overflow:hidden)。 将您的想象放在div中。 利润。
例如:
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>
使用CSS: overflow:
.thumb {
width:230px;
height:230px;
overflow:hidden
}
假设它们不必出现在IMG标签中……
HTML:
<div class="thumb1">
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1:hover { YOUR HOVER STYLES HERE }
编辑:如果div需要链接到某个地方，只需调整HTML和样式如下:
HTML:
<div class="thumb1">
<a href="#">Link</a>
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1 a {
display: block;
width: 250px;
height: 250px;
}
.thumb1 a:hover { YOUR HOVER STYLES HERE }
注意，这也可以修改为响应，例如%宽度和高度等。
可以使用. 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 >
