缩放图像在CSS中成比例（如果可能，没有JS！）

Question

我想使用CSS按比例缩放图像。

图像应以完整的容器大小显示，它应该变得更大或更小（取决于容器大小）。我也想在中间显示它。

修改：我已尝试min-width: 100%;和max-width: 100%;。这只适用于一个方向。使用min-width: 100%; max-height: auto;时，主要问题已解决但图片有时显示得太大（这意味着用户必须滚动）。我希望它完全显示，如果不可能，浏览器将增加边距。

谢谢！

Answer 1

img{
    max-width: 100%; /* If not scaling above native size */
}

或

img{
    width: 100%; /* Change this using media queries */
}

或

background-size

要在容器的中心显示它，请为容器指定text-align: center;规则默认为内联元素的规则，这样它们的行为就像文本一样，并且位于容器的中心。