首页 文章

如何在保持图像宽高比的同时，在没有javascript的情况下，如何使用最大高度和宽度进行灵活的CSS图像大小调整？

提问于
浏览 次
4

我真的以为这会在堆栈溢出的其他地方，但我搜索无效的时间长度 . 如果我错过了，请原谅我 .

我有一组图像需要尽可能大（宽度：100％到容器elem），只要容器不会因为容器宽度而变得太宽或图像太高 . 需要保留宽高比 .

我以为我可以这样做

img { width: 100%; height: auto; max-width: 500px; max-height: 250px; }

我们的想法是，如果图像在给定宽度和宽高比时达到最大宽度或最大高度，它将不再增长 . 实际上，这会导致图像宽度尽可能宽，但在高度过高时会破坏纵横比（将图像压缩到最大高度），而不是防止图像变宽 .

有没有更好的方法来解决这个问题？我想尽可能避免使用javascript . 我的测试是在Firefox 9中 .

css image image-scaling aspect-ratio

2 回答

  • 1

    您可以使用媒体查询创建固定图像大小的阶梯，然后像这样：

    @media screen and (min-width: 701px) and (max-width: 900px) {
    img {
        width:  800px;
        height: auto;
    }
}

@media screen and (min-width: 901px) and (max-width: 1100px) {
    img {
        width:  1000px;
        height: auto;
    }
}

    不是很漂亮，但它确实有效 .

    回复于
  • 2

    有点旧，但使用顶部或底部填充将保持您的纵横比 . 除以高度/宽度并将该百分比应用于衬垫顶部或底部 . 它有时会变得棘手，但它有效 .

    这是一篇很好的文章：http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

    回复于

相关问题