7

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

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

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

4

5 回答 5

9

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

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

请看： 使用 CSS 裁剪图像

于 2013-02-26T07:41:45.990 回答
2

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

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

于 2013-02-26T07:57:58.823 回答
0

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

于 2013-02-26T07:43:35.663 回答
0

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

});
于 2014-02-25T20:28:13.863 回答
-1

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

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

问题是，一些图像会因为它们的纵横比而看起来很奇怪。最好的办法是在上传时为每张图片创建不同大小的（更广为人知的称为缩略图）。不是在运行时，那将需要很长时间。

于 2013-02-26T07:41:55.480 回答