正方形图形显示一半html,关于html：如何使用CSS对中和裁剪图像以始终显示为正方形？...

我需要始终仅使用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。从侧面将相同的原理应用于农作物。

这样，我需要知道图像是矩形还是水平，并且还需要知道移动图像需要多少像素。根本不是解决方案。