使用 CSS 调整和裁剪图像答案

【问题标题】：Resizing and cropping images with CSS使用 CSS 调整和裁剪图像
【发布时间】：2013-02-11 14:08:52
【问题描述】：

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

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

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

【问题讨论】：

我怀疑你可以用 CSS 做到这一点
php怎么样？我的网站使用 php，所以这也是一个选项，除非它会大大降低网站速度。

标签： html css image-processing crop

【解决方案1】：

不可能“真正裁剪”带有 css 的图像。真正的裁剪意味着图像被缩小到新的值，并且它的大小比以前更小。

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

请看： Cropping images with CSS

【讨论】：

这看起来很有希望。我会检查一下，看看我能不能让它工作

【解决方案2】：

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

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

问题是，有些图像会因为它们的纵横比而看起来很奇怪。最好的办法是在您上传时为每张图片创建不同尺寸（即缩略图）。不是在运行时，这需要很长时间。

【讨论】：

别以为你真的读懂了我的问题。我经营一个音乐博客，我需要一些东西来动态缩放/裁剪每篇文章的图片。正如我在问题中所说，我不想只是拉伸它们。
是的，这就是为什么我告诉你必须通过 PHP 创建缩略图；)
你没有告诉用户是上传图片还是链接它们。有很大的不同。
不是问题的答案。 OP 专门询问了 CSS 技术。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以使用 clip 属性来裁剪元素。

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

【讨论】：

【解决方案5】：

我最近实际上遇到了同样的问题，并最终对背景图像的方式略有不同。另一个主要区别是我的方式不假设知道图像的宽度和高度 - 所以它可以动态地处理任何图像。虽然它确实需要一点点 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');        
      }
    });

});

【讨论】：