web-dev-qa-db-ja.com

bootstrapレスポンシブimgですが、画像の高さと幅を変更します

私のヘッダーは.png画像で、class="responsive-img"しかし、ヘッダーは大きく見える..高さと幅を変更するが、それを小さく保つ方法？

imagetwitter-bootstrapresponsive-design
12
Ahmed Albusaidi

ブートストラップ4

ブートストラップ4では、いくつかの イメージに関する新しいクラス が導入されました。

レスポンシブ画像は.img-fluidになりました

Bootstrapの画像は、.img-fluidで応答します。max-width：100％;およびheight：auto;は、親要素に合わせて拡大縮小するように画像に適用されます。

例：

<img src="..." class="img-fluid" alt="Responsive image">

img-fluidは何をしますか？

.img-fluid {
  max-width: 100%;
  height: auto;
}

サムネイルとして使用される画像は.img-thumbnailです

img-fluidの例：

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- img-fluid -->

<div>
  <svg class="bd-placeholder-img img-fluid" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">img-fuid</text></svg>
</div>

img-thumbnailの例

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<!-- img-thumbnail -->
<div>
  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">200x200</text></svg>
</div>

プレブートストラップ4

まず、class="img-responsive"ではなくclass="responsive-img"です

これだけを行うので、そのクラス自体はあなたを遠くに連れて行きません：

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

クラスを上書きし、必要な内容を追加することをお勧めします。高さと幅のみを変更したい（そして、応答性とサイズを小さくしたい）場合、基本的な例を次に示します。

.img-responsive {
  max-width: 90%; /* or to whatever you want here */
  max-height: auto; /* or to whatever you want here */
}

高さをタッチすると、レスポンシブイメージが変形します（必要な場合を除く）。したがって、最大幅で再生することをお勧めします。最小幅も追加してみてください。

メディアクエリ

特定のウィンドウサイズで画像がどのように見えるかを既に知っている場合は、@mediaを使用することもできます。

    /* start of desktop styles */

@media screen and (max-width: 991px) {
     /* start of large tablet styles */
     .img-responsive {
       min-width: 70%;
     }
}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */
     /* Adding a fixed/percentage min-width could ensure that the image doesn't get too small */
     .img-responsive {
       min-width: 30%;
     }
}

@media screen and (max-width: 479px) {
     /* start of phone styles */
     /* It's possible to hide the image if the screen becomes too small */
     .img-responsive {
       min-width: 10%;
     }
}

画面サイズに関する詳細はこちら

メディアタイプに関する詳細はこちら

30
kemicofa