2 つのレイアウトがありますが、概念的には同じです。
1 つは画像を含む div です。もう 1 つは 2 つのフローティング div 要素で、親の div の半分をそれぞれ左と右に配置し、それぞれに画像を含めます。親の div のサイズと比率はボディのサイズと比率に依存し、表示されるまでわからないため、一定の幅や高さではなくパーセンテージで指定する必要があります。どちらの場合も、縦横比を維持し、親 div をオーバーフローしないようにしながら、幅または高さを最大にする必要があるため、比率を維持しながら画像をできるだけ大きく表示します。
最大の高さまたは両方でプロポーションを維持する方法は知っていますが、両方ではないため、オーバーフローがあります。Javascriptでこれを達成する方法も知っていますが、レイアウトでスクリプトを避けようとしており、それをcssで処理したいと考えています。
ネットでそのようなものを見たことがなく、グーグルでそれについての手がかりも得られなかったので、CSSでこれが実際に可能かどうかさえ疑問に思っています。
どんな解決策でも大歓迎です。
編集 ：
わかりました、私はそれを行う方法を考え出しました。取引は、画像の最大高さと最大幅を 100% に設定することでした。しかし、私は別の問題に直面しているので、私がやろうとしていたことを誰かが役に立つと思ったらレイアウトを投稿し、新しい問題に焦点を当てるために質問を作り直します.
これがレイアウトです。画像の縦横比を可能な限り最大のサイズに保ちます。
index.html
<html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div id="pageleft" class="page">
<img src="img/1.jpg">
</div>
<div id="pageright" class="page">
<img src="img/2.jpg">
</div>
</body>
</html>
スタイル.css
html, body {
height: 100%;
overflow:hidden;
padding:0px;
margin:0px;
}
.header{
background-color:blue;
width:100%;
height:2em;
}
.page{
width:50%;
height:100%;
position:relative;
}
#pageright{
float:right;
background-color:green;
}
#pageleft{
float:left;
background-color:yellow;
}
.page > img{
position:absolute;
margin:auto;
top:0;
bottom:0;
max-height:100%;
max-width:100%;
}
#pageleft > img {
right:0;
}
#pageright > img {
left:0;
}
注 1: Chrome と Firefox の両方で、デスクトップ (ウィンドウを任意のサイズ/プロポーションにサイズ変更) とモバイル (縦向きと横向き) でテスト済み。
注 2: 画像に用紙カットの縦横比を使用していますが、両方の画像の縦横比が異なる場合でも、任意の画像サイズと縦横比で動作するはずです。
問題は、ヘッダーの高さが 2em であり、.page div がオーバーフローしていることです。誰かがそれを修正する方法を知っていますか?
前もって感謝します。