调整窗口大小时图像失真（CSS）答案

【问题标题】：Image is distorting when window is re-sized (CSS)调整窗口大小时图像失真（CSS）
【发布时间】：2018-06-04 02:16:28
【问题描述】：

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

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

【问题讨论】：

我只是将宽度设置为自动，但是当我调整窗口大小以使其更短时，它仍然会扭曲图像。

标签： css resize image-scaling

【解决方案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 不适用于内联元素。

【讨论】：

【解决方案2】：

您可以将图像的height 或width 设置为auto，并使用设置的大小控制其他属性，无论是百分比还是像素。 auto 应该保持图像的纵横比，而您可以使用其他属性控制图像的大小。

【讨论】：

【解决方案3】：

max-width:100% 和 height:auto 可以工作。应用 max-width:1000% 时；它将占用容器的宽度，高度将按比例变化。

【讨论】：