2

次のコードで画像ギャラリーをレスポンシブにしました。

<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg" />
</div>

<div class="line2">
<img src="image5.jpg" alt="image5.jpg" />
<img src="image6.jpg" alt="image6.jpg" />
<img src="image7.jpg" alt="image7.jpg" />
<img src="image8.jpg" alt="image8.jpg" />
</div>

.line1 { 
overflow:hidden; 
height:auto; 
}
.line1 img { 
width:25%; 
}
.line2 { 
overflow:hidden; 
height:auto; 
}
.line2 img { 
width:25%; 
}

まさに私が望んでいるものなので、応答性が機能していることを嬉しく思います。ただし、画像はすべて異なるサイズであるため、結果は次のようになります：http: //i50.tinypic.com/2dm9yms.pngそして、画像をトリミングできるように、http：//i46のようにしたいと思います。 tinypic.com/mm4xv6.png

そのようにするには、CSSで何を変更する必要がありますか？

4

1 に答える 1

2

divに固定の高さを与えることができれば、それは機能します。また、クラスは必要ありませんline1 。CSSを複製しているline2ことlineに注意してください。

.line {
   height: 80px;
   overflow: hidden
}
于 2012-11-26T18:32:18.837 に答える