CSS:如何强制比例图像缩放超过1:1px

时间:2013-06-30 13:46:33

标签: css image scaling

问题:使用CSS,如何按比例放大/缩小任意图像以填充浏览器框架中max-height / max-width环境边界确定的可用空间即使框架比图像大?以下适用于大于帧的图像,但小图像不会超出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 px。

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

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

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

0 个答案:

没有答案