我想使用 CSS 按比例缩放图像。
图像应以完整容器大小显示,它应该变大或变小(取决于容器大小)。我也想显示在中间。
编辑:我已经尝试过 min-width: 100%;
和 max-width: 100%;
。这只能在一个方向上起作用。当使用 min-width: 100%; max-height: auto;
主要问题已解决,但图片有时显示过大(这意味着用户必须滚动)。我希望它完全显示,当这不可能时,浏览器将增加边距。
谢谢!
最佳答案
img{
max-width: 100%; /* If not scaling above native size */
}
或
img{
width: 100%; /* Change this using media queries */
}
或
background-size
要将其显示在容器的中心,请为容器指定 text-align: center;
图像在默认情况下是内联元素,因此它们的行为类似于文本并将位于中心容器。
关于html - 在 CSS 中按比例缩放图像(如果可能,不用 JS!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23915629/