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

Question

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

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

我试过谷歌搜索，但没有用。

Answer 1

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

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

请看一下： 使用CSS裁剪图像

Answer 2

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

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

Answer 3

如果将图像设置为CSS背景，则可以使用background-size：cover | contains 。

Answer 4

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

});

Answer 5

您可以使用CSS设置网站上所有图像的大小：

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

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