0
私はギターをカスタマイズするためのアプリケーションを構築しています。読み込み時間を短縮するために、ギター本体とすべてのパーツをすべて1つまたは2つの画像にまとめたタイプのスプライトシートを作成しました。私が下に取り組んでいるコードブロックでは、divタグがスタイリングされています。レスポンスレイアウト内でサイズを変更すると背景画像のアスペクト比を維持できますか？
この画像の元の比率は、横2870ピクセル×縦1700ピクセルです。以下の例では、画像が「クロップアウト」されているか、または背景画像のプロパティによって示されている画像は、幅1001ピクセル×高さ326ピクセルです。
私はパーセンテージを使用しようとしましたが、レスポンシブなレイアウトのdivタグの幅を変更すると、比率を維持する方法を理解できませんでした。
#camila_template_wpr {
background-image: url(../img/jpg_sprite.jpg);
background-position: 0% 23.7%;
background-repeat: no-repeat;
background-size: auto 524%;
display: block;
margin: auto;
height: 324px;
max-width: 1001px;
position: relative;
}
私はMAX-widthプロパティを使用すると、高さが応答しないと、背景画像は幅に合わせて拡張しません。 –
Dave、コードの編集を提案しましたが、パディングに使用されている％値が変更されています。なぜあなたはそれを変えていますか？ ％の値を変更すると、「59.2％は幅の高さの割合」となるので、％値を取得する方法については私の記事には説明がありません。私はあなたが新しいパディングをどのように得たかを知りたい。 –
私はこれをもう一度見て、私はまだこの周りに私の頭を包んでしようとしています。 「切り取られた」背景画像セクションの幅は、1001ピクセル幅×326ピクセルの高さである。 326を1001で割った値は.325674なので、現在のロジックは幅が高さの32.567％です。そのため、底部のパディングは32.567％にする必要があります。私は30.895％を得たのかどうかはわかりませんが、計算された32.567％に近かったので、プレビューでよく見えました。 max-widthが1001ピクセルに達すると、画像の歪みに問題があります。高さは増え続けています。 –