Html 如何使用 CSS 居中和裁剪图像以始终显示为方形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18673900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center and crop an image to always appear in square shape with CSS?
提问by PurpleFoxy
I need to always crop a random-sized image to a square 160x160 using only CSS. The images should stay centered when cropped.
我需要始终仅使用 CSS 将随机大小的图像裁剪为 160x160 的正方形。裁剪时图像应保持居中。
My markup should be:
我的标记应该是：
<a href="#" class="cropper">
<img src="image" alt="description" />
</a>
Searching on StackOverflow I've found some answers (such as CSS - How to crop an image to a square, if it's already square then resize it), but they don't work for cases where your image can be larger horizontal (wide) ORvertical (tall).
在 StackOverflow 上搜索我找到了一些答案（例如CSS - 如何将图像裁剪为正方形，如果它已经是正方形然后调整它的大小），但它们不适用于您的图像可以更大水平（宽）的情况或垂直（高）。
Specifically, I need to be able to present both a wide image like this:
具体来说，我需要能够同时呈现这样的宽图像：
and a tall image like this:
和一个像这样的高大形象：
in square form, without knowing in advance which one is a horizontal rectangle or a vertical rectangle. It should also support already squared images.
以正方形形式，事先不知道哪个是水平矩形或垂直矩形。它还应该支持已经平方的图像。
回答by Itay
div
{
width: 200px;
height: 200px;
overflow: hidden;
margin: 10px;
position: relative;
}
img {
position: absolute;
margin: auto;
min-height: 100%;
min-width: 100%;
/* For the following settings we set 100%, but it can be higher if needed
See the answer's update */
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
}
Update - Improvement
更新 - 改进
As Salman Amentioned in the comments, the original solution has a flaw - it doesn't work well if the img's height or width (or both) are (at least) 3 times* larger than the containing div.
正如Salman A在评论中提到的那样，原始解决方案有一个缺陷 - 如果img的高度或宽度（或两者）（至少）比包含的div大 3 倍*，则效果不佳。
The problemis shown here.
该问题是出在这里。
Salman also gave a really simple and elegant fix. We just need to update the img's position coordinates (top, left, bottom, right) to work with higher percents. The following fix works with 1000%, but of course you can adjust it according to your needs.
Salman 还给出了一个非常简单而优雅的修复方法。我们只需要更新img的位置坐标（顶部、左侧、底部、右侧）以使用更高的百分比。以下修复适用于1000%，但当然您可以根据需要进行调整。
The working versionis shown here.
该工作版本显示在这里。
* The reason is that when we set the img's leftand right(or: topand bottom) coordinates to be -100%(of the containing div), the overall allowed width(or: height) of the img, can be at most 300%of the containing div's width(or: height), because it's the sum of the div's width (or: height) and the leftand right(or: topand bottom) coordinates.
*原因是，当我们设置IMG的左和右（或：顶部和底部）的坐标为-100％ （含的DIV），整体允许宽度（或：高度）的的IMG，可以是至多300％的含有格的宽度（或：高度），因为它是的总和的div'宽度s（或：高度）和左和右（或：顶部和底部) 坐标。
回答by Turdaliev Nursultan
object-fitproperty does the magic. On JsFiddle.
object-fit财产有魔力。在JsFiddle 上。
CSS
CSS
.image {
width: 160px;
height: 160px;
}
.object-fit_fill {
object-fit: fill
}
.object-fit_contain {
object-fit: contain
}
.object-fit_cover {
object-fit: cover
}
.object-fit_none {
object-fit: none
}
.object-fit_scale-down {
object-fit: scale-down
}
HTML
HTML
<div class="original-image">
<p>original image</p>
<img src="http://lorempixel.com/500/200">
</div>
<div class="image">
<p>object-fit: fill</p>
<img class="object-fit_fill" src="http://lorempixel.com/500/200">
</div>
<div class="image">
<p>object-fit: contain</p>
<img class="object-fit_contain" src="http://lorempixel.com/500/200">
</div>
<div class="image">
<p>object-fit: cover</p>
<img class="object-fit_cover" src="http://lorempixel.com/500/200">
</div>
<div class="image">
<p>object-fit: none</p>
<img class="object-fit_none" src="http://lorempixel.com/500/200">
</div>
<div class="image">
<p>object-fit: scale-down</p>
<img class="object-fit_scale-down" src="http://lorempixel.com/500/200">
</div>
Result
结果
回答by DeathGrip
<div>
<img class="crop" src="http://lorempixel.com/500/200"/>
</div>
<img src="http://lorempixel.com/500/200"/>
div {
width: 200px;
height: 200px;
overflow: hidden;
margin: 10px;
position: relative;
}
.crop {
position: absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
height: auto;
width: auto;
}
回答by Matt Fletcher
With the caveat of it not working in IE and some older mobile browsers, a simple object-fit: cover;is often the best option.
由于它不适用于 IE 和一些较旧的移动浏览器，因此简单object-fit: cover;通常是最好的选择。
.cropper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
}
.cropper img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
Without the object-fit: coversupport, the image will be stretched oddly to fit the box so, if support for IE is needed, I'd recommend using one of the other answers' approach with -100%top, left, right and bottom values as a fallback.
如果没有object-fit: cover支持，图像将奇怪地拉伸以适应框，因此，如果需要支持 IE，我建议使用其他答案之一的方法，将-100%顶部、左侧、右侧和底部值作为后备。
回答by Ritabrata Gautam
clipproperty with positionmay help you
clip财产position可能会帮助你
a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}
a img{
position:relative;
left:-50%;
top:-50%;
}
回答by khoa
I found a better solutions in following link. Only use "object-fit"https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
我在以下链接中找到了更好的解决方案。只使用“object-fit” https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
回答by MisterBla
Try putting your image into a container like so:
尝试将图像放入容器中，如下所示：
HTML:
HTML：
<div>
<img src="http://www.testimoniesofheavenandhell.com/Animal-Pictures/wp-content/uploads/2013/04/Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper.jpg" />
</div>
CSS:
CSS：
div
{
width: 200px;
height: 200px;
overflow: hidden;
}
div > img
{
width: 300px;
}
Here's a fiddle.
这是一个小提琴。
回答by Omirp
<div style="specify your dimension:overflow:hidden">
<div style="margin-top:-50px">
<img ... />
</div>
</div>
The above will crop 50px from the top of the image. You may want to compute to come up wit a top margin that will fit your requirements based on the dimension of the image.
以上将从图像顶部裁剪 50px。您可能希望根据图像的尺寸计算出符合您要求的上边距。
To crop from the bottom simply specify the height of the outer div and remove the inner div. Apply the same principle to crop from the sides.
要从底部裁剪，只需指定外部 div 的高度并删除内部 div。应用相同的原理从侧面进行裁剪。
回答by Priya
HTML:
HTML：
<div class="thumbnail">
</div>
CSS:
CSS：
.thumbnail {
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
