次の問題をどのように解決するのか知りたいです。
Bootstrap 3 を 24 列でグリッドガターを 30px に使用。ワイド ディスプレイでは、左サイドバーに col-7、メイン コンテンツに col-17 を使用します。問題は、ブートストラップがパーセンテージで幅を計算していることです。したがって、サイドバーには 339.5 ピクセル (29.16667%)、コンテンツには 824.484 ピクセル (70.83333%) があります。
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>現在、lazysizes や lazyspectratio などのスクリプトを使用して写真を遅延読み込みし、画像がまだ読み込まれていない場合でも画像コンテナーを同じサイズに保ちます。lazyspectratio では、高さを再計算して保持するために、幅を 100% にする必要があります。
でも… あるから… メインコンテンツが824.484px幅だと画像も824.484px幅で画質が悪い。私の画像表示が 824px でなければならないと仮定すると、比率が尊重されたとしても、最終的な画像表示はくだらないものになり、品質が失われます。
私の質問は: img > width=100% でこの問題を回避する方法は?
次のように、行の子の幅を「修正」するいくつかのスレッドを見ました。
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}img > width = 100% を維持し、列幅を整数にするのは良い解決策のようですが、この解決策では、複数の col-* および複数の media-queries を管理するために多くの CSS ルールを追加する必要があります...
あなたも ？この種の問題をどのように解決しますか？width=100% の img-responsive クラスを使用すると、Bootstrap 3 でパーセンテージ ベースの幅の品質が低下すると思うため、この問題に遭遇するのは私だけではないと確信しています。
ご提案いただきありがとうございます。