0

質問: CSS を使用して、フレームが画像よりもはるかに大きい場合でも、ブラウザ フレーム内の max-height/max-width 環境の境界によって決定される使用可能なスペースを埋めるために、任意の画像を比例的に拡大/縮小するにはどうすればよいですか? ? 以下は、フレームよりも大きな画像に対して機能しますが、小さな画像は 1:1 の screen:image ピクセルを超えてスケ​​ールアップしません。

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 px だとします。視覚的な結果は、ブラウザ ウィンドウの中央に配置された 900 x 450 ピクセルの画像になります。

2) 生の画像サイズが 1000 x 2000 px だとします。視覚的な結果は、ブラウザ ウィンドウの中央に配置された 450 x 900 ピクセルの画像になります。

注：これをすべて流動的にしたいと思います。ブラウザー ウィンドウのサイズが変更された場合、画像は常に比例して拡大縮小する必要があります。

4

0 に答える 0