0

さまざまな画像とさまざまなサイズの画像ギャラリーを作成しようとしています。私が欲しいものを説明するために、画像へのリンクを含めました。それぞれが画像を含む4つのdivで行を作成しました。画像には幅と高さがあります。しかし、私の画像にはさまざまなサイズがあります。つまり 600X500 です。ブートストラップを使用しています。

画像を div 全体 (400 X 400) に表示し、応答性を維持するにはどうすればよいですか?

画像の高さと幅を固定しようとしましたが、画像が反応しなくなりました。

<div class="row">
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>   
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>  
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>

CSS

.square {min-width: 400px; min-height: 400px;}

これは私が作ろうとしているもので、ある種の画像ギャラリーです

4

2 に答える 2

1

あなたはこれを行うことができます：

.square > div > img {
  min-width: 400px; 
  min-height: 400px;
  max-width: 100%; 
  max-height: 100%;
}

デバイスの画面が小さくなると、強制的に減少します。

于 2015-10-06T19:38:53.793 に答える
0

.square {width:100%; を試してください。高さ:自動;}

画像は常に div 要素内に収まるようにスケーリングされます。

于 2015-10-06T19:45:06.650 に答える