html输出正方形,html-如何使用CSS对中和裁剪图像以始终显示为正方形？

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