如何使用CSS将矩形图像“裁剪”为正方形?


170

我知道用CSS实际修改图像是不可能的,这就是为什么我将crop用引号引起来。

我想做的是拍摄矩形图像,然后使用CSS使它们显示为正方形,而不会扭曲图像。

我基本上想转这个:

在此处输入图片说明

变成这个:

在此处输入图片说明


4
这些图像是div的背景图像还是对于它们来说,将它们保留在<img>标签中对SEO很重要?
2013年

2
你有尝试过吗?对于CSS3 background-position或带有overflow:hidden和且具有相对位置的图像的旧包装div,这相当简单。
法布里西奥磨砂

它们肯定是背景图片
novicePrgrmr

看我的回答,我认为这是您总体上最好的选择。它避免了定位元素。
迈克尔

Answers:


78

假设它们不必位于IMG标签中...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

编辑:如果div需要链接到某个地方,只需调整HTML和样式,如下所示:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

请注意,这也可以修改为响应式的,例如宽度和高度百分比等。


1
这是使用单个标签定位和修剪的好方法。
rlemon 2013年

8
还要注意,在打印时,桅杆浏览器会禁用背景图片,因此它们不会显示。
j08691 2013年

它也可以处理:hover状态。如果div需要链接到某个地方,只需添加一个标签。至于打印,可以用print.css修复吗?如我错了请纠正我?
迈克尔

实际上,说实话,在这种情况下,使用A标签可以使打印物回退,并且无论如何,您都想添加CSS样式来解决该问题,以解决打印问题。
迈克尔

1
没关系,我将其更改为height: 460px; width: 100%;,它就像一种魅力
novicePrgrmr

417

没有包装程序div或其他无用代码的纯CSS解决方案:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

12
请注意,不幸的是,这不适用于IE和Edge atm。详情请参见:stackoverflow.com/a/37792830/1398056
baoutch 2016年

2
什么是我们不知道我们要使其与自动宽度成正方形的高度
Aravind Reddy '18

3
截至2018年6月,似乎只有IE11(2.71%)不支持对象适配,对我来说足够好了。

1
2019年的支持现在非常好。只有2.3%的人仍在使用IE11。这种解决方案是如此简单,我不禁要使用它,因为其他解决方案是如此的痛苦,我浪费了数小时试图使其与后端代码一起使用。
保罗·莫里斯

3
是时候让所有人都忘记IE了
iji

55
  1. 将您的图片放在div中。
  2. 给您的div明确的正方形尺寸。
  3. 将div上的CSS溢出属性设置为隐藏(overflow:hidden)。
  4. 将您的想象放入div中。
  5. 利润。

例如:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

5
必须确保使图像居中或至少与其中的位置保持一致。OP示例看起来居中(尽管我只是提到了这一点,并且不希望您完全更改答案:P)。
rlemon 2013年

1
@rlemon-然后,OP可以将div的位置设置为相对,将图像的位置设置为绝对,并调整top和left属性。
j08691 2013年

6
我只是在某人全部之前提到它;“但是现在一切都对齐了!” -:P
rlemon

1
是的,以中心为中心至关重要
novicePrgrmr


14

实际上,我最近遇到了同样的问题,最终得到了一个略有不同的方法(我无法使用背景图片)。它确实需要一点点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');        
      }
    });

});

我认为这优于CSS背景替代方法,因为图像是内容而不是“样式”,因此应将其保留在HTML层上。将它们放在CSS上而不是HTML上也会对您网页的SEO产生影响。谢谢!
Jose Florido

改善此问题的一个好主意是$(this).load(function(){...在每个循环内添加,因此jQuery会稍等片刻,直到图像加载并获得实际图像尺寸为止。
Jose Florido

14

如果图像位于具有响应宽度的容器中:

的HTML

<div class="img-container">
  <img src="" alt="">
</div>

的CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

真的很好 它也具有难以置信的灵活性,因为一旦将图像平方后,您就可以将其圈出并做其他很酷的事情。
洛基凯夫

3

我遇到了类似的问题,无法与背景图片“妥协”。我想到了这个。

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

希望这可以帮助!

示例:https//jsfiddle.net/cfbuwxmr/1/



1

在.testimg类中使用带有正方形尺寸的div并在其中包含图像:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

或具有图片背景的方形div。

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

以下是一些示例:http : //jsfiddle.net/QqCLC/1/

更新了图像中心

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>


0

object-fit: cover 会完全满足您的需求。

但它可能在IE / Edge上不起作用。请按照如下所示的方法使用CSS对其进行修复,以使其在所有浏览器上均可工作。

我采取的方法是将图像绝对放置在容器内 ,然后使用组合将其放置在中心位置

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%;

这使图像获得Object-fit:cover的效果。


这是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。


原始图片
原始图片

垂直裁剪
垂直裁剪的图像

水平裁剪
水平裁剪的图像


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.