読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

ブロック幅にあわせて画像を表示

ウィンドウ幅に応じてブロック幅が変化

  • ブラウザ最大幅を想定した画像は、そのまま読み込むと大き着ます
<div class="container">

<h1>Grid system (画像の表示サイズ)</h1>

<div class="row">
  <div class="col-xs-6" style="background:#CCC; height:350px;"></div>
  <div class="col-xs-3" style="background:#999; height:350px;"></div>
  <div class="col-xs-3" style="background:#CCC; height:350px;"></div>
</div>

</div><!-- /.container -->



<div class="container">

<h1>Grid system (画像の表示サイズ)</h1>

<div class="row">
<div class="col-xs-6" style="background:#CCC; height:350px;">
<img src="img/castle-01.jpg">
</div>
<div class="col-xs-3" style="background:#999; height:350px;">
<img src="img/castle-02.jpg">
</div>
<div class="col-xs-3" style="background:#CCC; height:350px;">
<img src="img/castle-03.jpg">
</div>
</div>

</div><!-- /.container -->


ブロック幅に合わせて画像のサイズを自動調整
  • 「画像の幅」が「ブロックの幅」と一致するように画像が縮小されます
  • img-responsiveクラス
<div class="container">

<h1>Grid system (画像の表示サイズ)</h1>

<div class="row">
<div class="col-xs-6" style="background:#CCC;height:350px;">
<img src="img/castle-01.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="background:#999;height:350px;">
<img src="img/castle-02.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="background:#CCC;height:350px;">
<img src="img/castle-03.jpg" class="img-responsive">
</div>
</div>

</div><!-- /.container -->



※画像幅がブロック幅より小さかった場合は、本来のサイズで表示されます

ブロック内の余白を0にした場合
<div class="container">

<h1>Grid system (画像の表示サイズ)</h1>

<div class="row">
<div class="col-xs-6" style="padding:0; background:#CCC; height:350px;">
<img src="photo/castle-01.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="padding:0; background:#999; height:350px;">
<img src="photo/castle-02.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="padding:0; background:#CCC; height:350px;">
<img src="photo/castle-03.jpg" class="img-responsive">
</div>
</div>

</div><!-- /.container -->



<div class="container">

<h1>世界の城</h1>

<div class="row">
  <div class="col-xs-6" style="padding:0;">
    <img src="photo/castle-01.jpg" class="img-responsive">
  </div>
  <div class="col-xs-3" style="padding:0;">
    <img src="photo/castle-02.jpg" class="img-responsive">
    <img src="photo/castle-04.jpg" class="img-responsive">
  </div>
  <div class="col-xs-3" style="padding:0;">
    <img src="photo/castle-03.jpg" class="img-responsive">
    <img src="photo/castle-05.jpg" class="img-responsive">
  </div>
</div>

</div><!-- /.container -->