html - 在 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; 图像在默认情况下是内联元素，因此它们的行为类似于文本并将位于中心容器。