如何“裁剪”一个矩形的图像到一个正方形与CSS？

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

我想要做的是采取矩形图像，并使用CSS，使他们看起来平方毫不扭曲的图像。

我基本上想要这样做：

进入这个：

Answer 1

假设他们不必在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; } .thumb: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; } .thumb a { display: block; width: 250px; height: 250px; } .thumb a:hover { YOUR HOVER STYLES HERE } 

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

Answer 2

没有包装div或其他无用代码的纯CSS解决scheme：

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

Answer 3

1. 把你的图像放在一个div中。
2. 给你明确的方形尺寸。
3. 将div上的CSS溢出属性设置为隐藏（ overflow:hidden ）。
4. 把你的想象里面的div。
5. 利润。

例如：

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

Answer 4

使用background-size：cover – 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 5

我最近遇到了同样的问题，最后以一种稍微不同的方式（我无法使用背景图片）。 它确实需要一点点的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 6

使用CSS：溢出：

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

Answer 7

使用带有.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/

因此更新了图像中心

Answer 8

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

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