调整窗口大小时图像失真(CSS)
调整窗口大小时图像失真(CSS)
提问于 2018-06-04 10:16:29
因此，我一直在尝试创建一个简单的页面，其中的图像占据了100%的高度，并带有一个小的侧边栏。当我调整窗口大小时，我想让图像自动调整大小。当我垂直调整窗口大小时，宽度保持不变，这不是我想要的(无论窗口大小如何，我都希望它保持它的纵横比)。我真的不喜欢这种扭曲，但不确定如何解决它。知道我做错了什么吗？
.big-image {
max-height: 100%;
min-width: 20%;
margin: auto;
overflow: hidden;
}回答 3
Stack Overflow用户
发布于 2018-06-04 10:20:53
您可以将图像的height或width设置为auto，并使用设置的大小控制其他属性，无论是百分比还是px。该auto应该保持图像的纵横比，而您可以使用其他属性来控制图像的大小。
Stack Overflow用户
发布于 2018-06-04 10:43:19
max-width:100%和height:auto将会正常工作。当应用max- width :1000%时，它将占用容器的宽度，高度将按比例变化。
Stack Overflow用户
发布于 2018-06-04 13:03:02
将display: block或display: inline-block设置为.big-image类，以使max-height和min-width属性正常工作。这些属性以及height、width、min-height、max-width、padding-top、padding-bottom、margin-top和margin-bottom都不适用于内联元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50672679
复制相关文章
相似问题
腾讯云开发者
