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

How to "crop" a rectangular image into a square with CSS?

提问by novicePrgrmr

I know that it is impossible to actually modify an image with CSS, which is why I put crop in quotes.

我知道用 CSS 实际修改图像是不可能的，这就是为什么我用引号括起来的原因。

What I'd like to do is take rectangular images and use CSS to make them appear square without distorting the image at all.

我想要做的是拍摄矩形图像并使用 CSS 使它们看起来是方形的，而根本不会扭曲图像。

I'd basically like to turn this:

我基本上想把这个：

Into this:

进入这个：

采纳答案by Michael

Assuming they do not have to be in IMG tags...

假设它们不必在 IMG 标签中......

HTML:

HTML：

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

CSS:

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 }

EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:

编辑：如果 div 需要链接到某个地方，只需像这样调整 HTML 和样式：

HTML:

HTML：

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

CSS:

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 }

Note this could also be modified to be responsive, for example % widths and heights etc.

请注意，这也可以修改为响应式，例如 % 宽度和高度等。

回答by Vision Hive

A pure CSS solution with no wrapper divor other useless code:

一个没有包装器div或其他无用代码的纯 CSS 解决方案：

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

回答by j08691

1. Place your image in a div.
2. Give your div explicit square dimensions.
3. Set the CSS overflow property on the div to hidden (overflow:hidden).
4. Put your imagine inside the div.
5. Profit.

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

For example:

例如：

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

回答by Philip Nuzhnyy

Using background-size:cover - http://codepen.io/anon/pen/RNyKzB

使用背景尺寸：封面 - http://codepen.io/anon/pen/RNyKzB

CSS:

CSS：

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

Markup:

标记：

<div class="image-container"></div>

回答by FreddyBushBoy

I actually came across this same problem recently and ended up with a slightly different approach (I wasn't able to use background images). It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).

我最近实际上遇到了同样的问题，最终采用了稍微不同的方法（我无法使用背景图像）。它确实需要一点点 jQuery 来确定图像的方向（不过我确定你可以使用普通的 JS）。

I wrote a blog post about itif you are interested in more explaination but the code is pretty simple:

如果您对更多解释感兴趣，我写了一篇关于它的博客文章，但代码非常简单：

HTML:

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:

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:

jQuery：

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

回答by JKL

If the image is in a container with a responsivewidth:

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

HTML

HTML

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

CSS

CSS

.img-container {
  position: relative;

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

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

回答by Zach Botterman

I had a similar issue and could not "compromise" with background images. I came up with this.

我有一个类似的问题，无法“妥协”背景图像。我想出了这个。

<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'});

Hope this helps!

希望这可以帮助！

Example: https://jsfiddle.net/cfbuwxmr/1/

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

回答by Diodeus - James MacFarlane

Use CSS: overflow:

使用 CSS：溢出：

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

回答by tech292

Either use a div with square dimensions with the image inside with the .testimg class:

使用带有方形尺寸的 div 和 .testimg 类：

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

.testimg {
    margin-left: -76px

}

or a square div with a background of the image.

或带有图像背景的方形 div。

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

Here's some examples: http://jsfiddle.net/QqCLC/1/

下面是一些例子：http: //jsfiddle.net/QqCLC/1/

UPDATED SO THE IMAGE CENTRES

更新图像中心

.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>

回答by Furqan Rahamath

object-fit: coverwill do exactly what you need.

object-fit: cover会做你需要的。

But it might not work on IE/Edge. Follow as shown below to fix it with just CSSto work on all browsers.

但它可能不适用于 IE/Edge。按照如下所示仅使用 CSS修复它以在所有浏览器上工作。

The approach I took was to position the image inside the container with absoluteand then place it right at the centreusing the combination:

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Once it is in the centre, I give to the image,

一旦它在中心，我给图像，

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

This makes the image get the effect of Object-fit:cover.

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

---

---

Here is a demonstration of the above logic.

下面是对上述逻辑的演示。

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

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

This logic works in all browsers.

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

---

---

Original Image

原图

Vertically Cropped

垂直裁剪

Horizontally Cropped

水平裁剪

---

---