我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
当前回答
使用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>
其他回答
实际上,我最近遇到了同样的问题,最后用了一个稍微不同的方法(我不能使用背景图像)。它确实需要一点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');
}
});
});
现在你可以使用纵横比:
img {
aspect-ratio: 1 / 1;
}
它在现代浏览器中也有广泛的支持: https://caniuse.com/mdn-css_properties_aspect-ratio
使用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>
我用了不同的方法。你基本上需要裁剪矩形图像,使其适合正方形,这就是它的全部。最好的方法是如果图像宽度大于高度,那么你从图像的左边和右边稍微裁剪图像。如果图像高度大于图像宽度,则裁剪图像底部。这是我的解决方案。不过我需要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>
适合对象:封面正好可以满足你的需要。
但它可能无法在IE/Edge上运行。如下所示,用CSS修复它,使其适用于所有浏览器。
我采用的方法是在容器中使用absolute定位图像,然后使用组合将其放在正中央:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它在中心,我给图像,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使得图像得到对象适合:覆盖的效果。
下面是上述逻辑的演示。
https://jsfiddle.net/furqan_694/s3xLe1gp/
这种逻辑适用于所有浏览器。
原始图像
垂直剪裁
水平的剪裁
方形容器