html图片的高宽大小,CSS：如何设置相对于父高的图像大小？

小编典典

原始答案：

如果您准备选择CSS3，则可以使用css3translation属性。根据更大的尺寸调整大小。如果您的高度大于容器的宽度，而宽度小于容器的宽度，则宽度将被拉伸到100％，高度将从两侧被修剪。同样适用于更大的宽度。

您的需求， HTML：

和 CSS：

.img-wrap {

width: 200px;

height: 150px;

position: relative;

display: inline-block;

overflow: hidden;

margin: 0;

}

div > img {

display: block;

position: absolute;

top: 50%;

left: 50%;

min-height: 100%;

min-width: 100%;

transform: translate(-50%, -50%);

}

说明

DIV设置为relative位置。这意味着所有子元素都将从此DIV的起始位置获取起始坐标(原点)。

图像被设置为BLOCK元素，min-

width/height两者都设置为100％意味着无论图像大小如何都应最小化其父图像的100％。min是关键。如果按最小高度计，图像高度超过了父代的高度，则没问题。它将查找最小宽度，并尝试将最小高度设置为父母的100％。两者都相反。这样可确保div周围没有缝隙，但图像始终较大并被裁剪overflow:hidden;

现在image，这个被设置为absolute与位置left:50%和top:50%。指从顶部和左侧推动图像50％，以确保原点来自DIV。左/上单位是从父级开始测量的。

魔术时刻：

transform: translate(-50%, -50%);

现在，此translateCSS3transform属性功能可移动/重新定位有问题的元素。此属性处理所应用的元素，因此值(x，y)或(-50％，-50％)意味着将图像负向左移动图像尺寸的50％，并向负向顶部移动图像尺寸的50％

。

例如。如果图片大小为transform:translate(-50%,-50%)200像素×150像素，则将计算为平移(-100px，-75px)。当我们拥有各种尺寸的图像时，％单位会有所帮助。

这只是找出图像质心和父DIV并进行匹配的一种棘手方法。

抱歉，解释时间过长！

2020-05-16