如何用CSS将矩形图像"裁剪"成方形？

Question

我知道用CSS实际修改图像是不可能的,这就是为什么我把作物放在引号中.

我想做的是拍摄矩形图像并使用CSS使它们显得方正而不会扭曲图像.

我基本上想转此:

进入:

Answer 1

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

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

Answer 2

假设他们不必在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 }

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

Answer 3

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

例如:

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

Answer 4

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

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

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

<div class="rect-img-container">
  <img class="rect-img" src="https://picsum.photos/id/0/367/267" alt="">
</div>

（编辑：从 sass 更新为纯 css）（编辑：添加了虚拟图像以供参考）

Answer 5

使用background-size:封面 - http://codepen.io/anon/pen/RNyKzB

CSS:

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

标记:

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

Answer 6

查看 CSSaspect-ratio

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square-image{
  width: 50%;
  background-image: url('https://picsum.photos/id/0/367/267');
  background-size: cover;
  background-position: center;
  aspect-ratio: 1/1;
}

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

您也可以使用常规img标签来执行此操作，如下所示

.square-image{
  width: 50%;
  object-fit: cover; /* Required to prevent the image from stretching, use the object-position property to adjust the visible area */
  aspect-ratio: 1/1;
}

<img src="https://picsum.photos/id/0/367/267" class="square-image"/>

Answer 7

我最近遇到了同样的问题,结果却采用了稍微不同的方法(我无法使用背景图像).它确实需要一点点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 8

今天您可以使用aspect-ratio：

img {
   aspect-ratio: 1 / 1;
}

它在现代浏览器中也得到了广泛支持： https ://caniuse.com/mdn-css_properties_aspect-ratio

Answer 9

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/

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

原图

垂直裁剪

水平裁剪