我需要始终仅使用CSS将随机尺寸的图像裁剪为160x160的正方形。
裁剪后图像应居中。
我的标记应该是:
在StackOverflow上搜索时,我找到了一些答案(例如CSS-如何将图像裁剪为正方形,如果已经是正方形,然后调整其大小),但是在您的图像可以水平更大(宽)的情况下,它们不起作用 或垂直(高)。
具体来说,我需要能够同时呈现两个宽幅图像:
像这样的高个子形象:
以正方形形式显示,而无需事先知道是水平矩形还是垂直矩形。 它还应支持已经平方的图像。
可能不是您要找的答案,但为什么不尝试background-size:cover?
可以裁成固定大小吗?
你的意思是这样的吗? jsfiddle.net/J7a5R/2
@Itay是的,对不起,应该裁剪为固定大小。
stackoverflow.com/questions/15167545/
@SachinG它使用背景属性,我需要一个img标签
@Itay它不起作用,Ive用小提琴回答了他的问题,并发现它没有使图像居中。
它不会使图像居中。
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的宽度(或:高度)与左右坐标(或:顶部和底部)的总和。
有用。您放入的图像只是条纹。
我需要使它们适应"缩略图"空间
哇,这可能是我一段时间以来见过的最不清楚的帖子。您每分钟都在增加要求
让我们继续聊天中的讨论
如果图像大于div,则对于img标签,最好将width: 100%用于纵向图像,将height: 100%用于横向图像。
如果图片大于div大小的300%是否可行?我不这么认为。小提琴
@SalmanA你是对的。但这在其他方面却相当不错。我想它可以改善。
@Itay仅使用大(但明智的)数字而不是100%。
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
结果
除非您确实需要IE支持,否则这绝对是必经之路。即使这样,它也可能会更好,只是通知您的用户他们需要切换到现代浏览器...
很高兴知道这个存在!让我们希望尽快实现跨浏览器的完全兼容性。
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/
太完美了,这是我认为的正确答案
使用超出500x200 / 250x100比例的图像时,此解决方案不起作用
由于存在警告,在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支持,我建议使用其他答案之一,其中-100%顶部,左侧,右侧和底部值作为备用。
http://caniuse.com/#feat=object-fit
我在以下链接中找到了更好的解决方案。仅使用"适合对象"
https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
值得注意的是IE不支持
这或多或少只是重复了这个现有答案。
HTML:
CSS:
.thumbnail {
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
position的clip属性可能对您有帮助
a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}
a img{
position:relative;
left:-50%;
top:-50%;
}
工作场所
尝试像这样将图像放入容器中:
HTML:
CSS:
div
{
width: 200px;
height: 200px;
overflow: hidden;
}
div > img
{
width: 300px;
}
这是一个小提琴。
@PurpleFoxy最好使用更方形的图像,猜想您需要稍微调整一下尺寸。
上面的图片将从图片顶部开始裁剪50px。您可能需要根据图像的尺寸计算出最适合您要求的最高边距。
要从底部开始裁剪,只需指定外部div的高度并删除内部div。从侧面将相同的原理应用于农作物。
这样,我需要知道图像是矩形还是水平,并且还需要知道移动图像需要多少像素。根本不是解决方案。