html-如何使用CSS对中和裁剪图像以始终显示为正方形?
我需要始终仅使用CSS将随机大小的图像裁剪为160x160的正方形。裁剪后图像应居中。
我的标记应该是:
在StackOverflow上搜索时,我找到了一些答案(例如CSS-如何将图像裁剪为正方形,如果已经是正方形,然后调整其大小),但是在您的图像可以水平更大(宽)的情况下,它们不起作用 或垂直(高)。
具体来说,我需要能够同时呈现两个宽幅图像:
像这样的高个子形象:
以正方形形式显示,而无需事先知道哪个是水平矩形还是垂直矩形。 它还应支持已经平方的图像。
PurpleFoxy asked 2020-01-21T07:35:53Z
9个解决方案
94 votes
jsFiddle演示
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%;
}
更新-改进
正如Salman A在评论中提到的那样,原始解决方案有一个缺陷-如果img的高度或宽度(或两者)至少是包含的div的3倍*,那么它就不能很好地工作。
问题显示在这里。
萨尔曼(Salman)还提供了一个非常简单而优雅的解决方案。 我们只需要更新img的位置坐标(上,左,下,右)即可使用更高的百分比。 以下修复程序适用于1000%,但是您当然可以根据需要进行调整。
工作版本如下所示。
*原因是,当我们将img的左右坐标(或:顶部和底部)设置为-100%(包含div的坐标)时,img的总允许宽度(或:高度)最多为 包含div的宽度(或:高度)的300%,因为它是div的宽度(或:高度)与左右坐标(或:顶部和底部)的总和。
Itay answered 2020-01-21T07:36:37Z
37 votes
object-fit属性发挥作用。 在JsFiddle上。
的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
original image
object-fit: fill
object-fit: contain
object-fit: cover
object-fit: none
object-fit: scale-down
结果
Turdaliev Nursultan answered 2020-01-21T07:37:10Z
15 votes
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;
}
[http://jsfiddle.net/J7a5R/56/]
DeathGrip answered 2020-01-21T07:37:30Z
6 votes
由于存在警告,在IE和某些较旧的移动浏览器中不起作用,因此简单的object-fit: cover通常是最佳选择。
.cropper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
}
.cropper img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
没有object-fit: cover的支持,图像将被奇怪地拉伸以适合盒子,因此,如果需要对IE的支持,我建议使用其他答案之一,将2712113563149272072065顶部,左侧,右侧和底部值作为备用。
[http://caniuse.com/#feat=object-fit]
Matt Fletcher answered 2020-01-21T07:37:59Z
1 votes
尝试像这样将图像放入容器中:
HTML:
CSS:
div
{
width: 200px;
height: 200px;
overflow: hidden;
}
div > img
{
width: 300px;
}
这是一个小提琴。
MisterBla answered 2020-01-21T07:38:32Z
1 votes
具有position的clip属性可能会帮助您
a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}
a img{
position:relative;
left:-50%;
top:-50%;
}
工作场所
Ritabrata Gautam answered 2020-01-21T07:38:56Z
1 votes
HTML:
CSS:
.thumbnail {
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
Priya answered 2020-01-21T07:39:21Z
1 votes
我在以下链接中找到了更好的解决方案。 仅使用“适合对象”[https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87]
khoa answered 2020-01-21T07:39:41Z
0 votes
上面的图片将从图片顶部开始裁剪50px。 您可能需要根据图像的尺寸计算出最适合您要求的最高边距。
要从底部开始裁剪,只需指定外部div的高度并删除内部div。 从侧面对作物应用相同的原理。
Omirp answered 2020-01-21T07:40:06Z