現時点では、いくつかのサムネイルを にプルするレイアウトがあります。gridそれぞれは、ピクセル寸法 ( ) によって定義される固定比率 (約 16:9) を維持するスタイルによって定義されます389px x 230pxが、少し小さく見えます。高解像度画面で。
100%画像は、実際には DIVの幅と高さをカバーする背景として DIV に取り込まれ、DIV はDIV明らかに縦横比とサイズを制御します。
私が探しているのは、これらの DIV をデバイスのページ サイズに基づいて動的にサイズ変更することですが、DIV の比率を維持することです。
これは可能ですか？
私の考えは、ページのパーセンテージに基づいて幅を設定することですが、高さを設定して正しい縦横比を維持する方法がわかりません(解像度が異なるなどのため)。
これを行う最良の方法は何ですか？
編集 -これまでのすべてのアイデアに感謝します。現時点でデータをどのように取り込んでいるかをお見せする必要があるかもしれません。
私のHTMLには、グリッドを生成する次のコードがあります
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
これは、次の CSS でスタイル設定されています
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
このように実装している理由は、Div が画像の下部に浮かぶようにするためです。