目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。
什么好主意吗?
目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。
什么好主意吗?
当前回答
我想这就是你要找的东西,我自己也在找,但在我找到密码之前我又想起来了。
background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;
数字进化正在进行中。
其他回答
我想这就是你要找的东西,我自己也在找,但在我找到密码之前我又想起来了。
background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;
数字进化正在进行中。
也有同样的问题。对我来说,问题是高度属性也已经在其他地方定义,像这样固定它:
.img{
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
简单的解决方案:
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
顺便说一下,如果你想把它放在父div容器的居中,你可以添加这些css属性:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
它应该真的像预期的那样工作:)
通过将CSS的max-width属性设置为100%,图像将填充它的父元素的宽度,但不会呈现比它的实际大小更大,从而保持分辨率。
将height属性设置为auto可以保持图像的纵横比,使用这种技术可以覆盖静态高度,并使图像能够在各个方向上按比例伸缩。
img {
max-width: 100%;
height: auto;
}
简单优雅的工作解决方案:
img {
width: 600px; /*width of parent container*/
height: 350px; /*height of parent container*/
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}