css - 重新调整窗口大小时图像失真(CSS)

Question

所以我一直在尝试创建一个简单的页面，其中图像占据 100% 的高度，并带有一个小侧边栏。我希望图像在调整窗口大小时自行调整大小。当我垂直调整窗口大小时，宽度保持不变，这不是我想要的(无论窗口大小如何，我都希望它保持纵横比)。我真的不喜欢这种失真，但不确定如何修复它。知道我做错了什么吗？

.big-image {
    max-height: 100%;
    min-width: 20%;
    margin: auto;
    overflow: hidden;
}

Answer 1

将 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 对行内元素不起作用。