Question

我有一个网站，可以显示一堆不同的图像，所有不同的分辨率和宽高比。在CSS中有一种简单的方法可以调整图像大小并将图像裁剪到一定的分辨率吗？出于我的目的，我希望调整大小的图像为280x280。

当然我可以设置<img height = '280' width = '280' />，但这会延长它。我想要两个分辨率中较小的一个，做一个正方形，然后取中心像素。例如，如果分辨率为480x200，我希望它从图像中心取出200x200的部分。

我尝试过谷歌搜索，但无济于事。

Answer 1

使用css的图像的“真实裁剪”是不可能的。真实裁剪意味着图像缩小到新值，并且它的尺寸也比以前小。

但是有一个带有负边距或绝对定位的解决方案，这对你有很大的帮助。我多次使用过这种技术。

请看一下： Cropping images with CSS

Answer 2

您可以使用剪辑属性，用于裁剪元素。

几周前我在Codrops写了一篇关于它的教程：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。

Answer 3

如果您将图片设置为CSS背景，则可以使用background-size: cover|contain。

Answer 4

我最近遇到了同样的问题，结果却采用了略微不同的背景图像方式。另一个主要区别是我的方式不假设知道图像的宽度和高度 - 因此它将与任何图像动态地工作。它确实需要一点点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');        
      }
    });

});

Answer 5

您可以使用CSS设置网站上所有图片的尺寸：

img {
    width: 280px;
    height: 280px;
}

问题是，有些图像由于其方面无线电而看起来很奇怪。最好的方法是在上传时创建不同尺寸的每个图像（更好地称为缩略图）。 Noot在运行时，需要很长时间。

使用CSS调整图像大小和裁剪

5 个答案: