0

问题：使用 CSS，如何使任意图像按比例放大/缩小以填充由浏览器框架中的最大高度/最大宽度环境的边界确定的可用空间，即使框架比图像大得多? 以下适用于大于框架的图像，但小图像不会 SCALE UP 超过 1:1 屏幕：图像像素。

的HTML：

<div class="frame"><span class="helperSpanToAlignImageVertically"></span>
    <img class="imageRaw" src="somesmallimg.jpg">
</div>

CSS：

.frame {
    position: fixed;
    height: 100%;
    width: 100%;
    text-align: center;
}
.helperSpanToAlignImageVertically {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.imageRaw {
    vertical-align: middle;
    max-height: 90%;
    max-width: 90%;
}

示例：假设浏览器窗口为 1000 x 1000 像素。

1) 假设原始图像大小为 200 x 100 像素。视觉结果应该是 900 x 450 像素的图像，位于浏览器窗口的中心。

2) 假设原始图像大小为 1000 x 2000 像素。视觉结果应该是 450 x 900 像素的图像，位于浏览器窗口的中心。

注意：我希望这一切都是流畅的。如果浏览器窗口大小发生变化，图像应始终按比例缩放。

4

0 回答 0