web-dev-qa-db-ja.com

Bootstrap lg、md sm、xsでの異なる画像サイズ

視聴者がスマートフォンやPCを持っている場合、画像のサイズを変更する必要があります。これは私が望むものを達成しますが、imgを4回ロードし、それが冗長であるため、それを行うには悪い方法です。

<div class="col-md-4 text-center">
    <img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
    <img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
    <img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
    <img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>

一度に1つの画像のみを表示し、サイズのみが異なります。この醜いマークアップなしでそれを達成する方法は？おそらくCSSでは、単純にするために画像サイズをHTMLに入れています。

htmlcssresponsive-designtwitter-bootstrap-3
9
Mateo Velenik

あなたが探している結果に応じて、これには複数の解決策があります。結果のセルのサイズを変更して、JSFiddleの動作を試します。

1.幅の割合を使用する

画像の幅のパーセンテージを設定して、画面のサイズに応じて調整することができます。このソリューションは、パーセンテージが元の幅よりも大きい場合、たとえば、画像が250px幅でwidth: 50%を使用し、画面の幅が600pxである場合、画像のサイズを大きくする可能性があります。幅は300pxです。

JSFiddle を参照してください。

1.1幅のパーセンテージの使用、固定幅の親

前のソリューションを使用したいが、画像を元のサイズより大きくしたくない場合は、max-widthを使用して親を設定できます。

JSFiddle を参照してください。

2.ブレークポイントの使用

CSS3メディアクエリを使用して、画面の幅の範囲に応じて画像のサイズを変更します。

JSFiddle を参照してください。

メディアクエリとレスポンシブCSSの詳細については、こちらをご覧ください こちら 。

カスタムメディアクエリサイズを使用せず、Bootstrap固有のブレークポイントを使い続ける場合、CSSは次のようになります。

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

JSFiddle を参照してください。これらのサイズは文書化されています ここ 。 Bootstrap 3は mobile-firstアプローチ を使用するため、xsがデフォルトです。

17
Filly
img {
  width: 100%;
}

これにより、画像が親の100％になります。これにより画像が変更されます。したがって、親がcol-md-4の場合、div全体が使用されます。だからあなたはできる

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

このdiv内の画像は、imgが100％に設定されている場合、colclasssに対して変更されます。画像がdiv全体を占めることを望まない場合は、それに応じて75％、50％などを調整します。

5
jhamPac

画像が非表示になっているすべての条件を指定するのではなく、表示されるタイミングを指定するほうが適切でわかりやすいです。

<div class="col-md-4 text-center">
<img class="visible-lg" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="visible-md" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="visible-sm" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="visible-xs" src="~/Content/Images/masinaC.png" width="100" height="100" />

ブラウザは、関連する画像を関連するビューポートサイズでのみ表示するため、メディアクエリをいじる必要はありません。

5
Marodo

<picture> 要素とBootstrap 4's sensitive breakpoints を使用した例を次に示します：

<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.png">
  <source  media="(min-width: 992px)" srcset="/images/lg.png">
  <source  media="(min-width: 768px)" srcset="/images/md.png">
  <source  media="(min-width: 576px)" srcset="/images/sm.png">
  <source  media="(max-width: 575px)" srcset="/images/xs.png">
  <img src="/images/default.png" alt="Example Text" style="width:auto;" >
</picture>

これを使用すると、ブラウザはデバイスの幅に応じて単一の正しい画像をロードします。古いブラウザの場合は、デフォルトの<img>要素をロードするだけです。

2
tyler.frankenstein

HTML5に新しいタグ<picture>が追加されました

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

また、ブートストラップ4は<picture>をサポートしています

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
1
ram

私も初心者ですが、上記のすべての複雑なコードではなく、この単純なコードで問題が解決しました。

#logo img {
    max-height: 100%; 
    max-height: 50vh; //50% of user's viewport height
}

widthを変更する場合は、次のようにしてください。

#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

これが他の人にも役立つことを願っています。

0
ofarukcaki