1

サムネイルを表示して、HTMLでアルバムプレビューを作成しようとしています。すべてのサムネイルは、正方形の形で定義する必要があります。

さて、サムネイルを表示しようとすると、一部の画像の解像度が歪むか、そうでない場合（つまり、両方のプロパティ（高さと幅）を設定しない場合）、画像はDIVから出てきます他の画像と重なっています。

画像の解像度を失わずに画像を表示して、divから出ないようにする方法を教えてください。画像がトリミングされていてもかまいません。

テーブルを使用していて、これにiFrameを使用したくないので、単純なソリューションが適しています。ありがとう！！

4

4 に答える 4

6

overflow: hiddenあなたのdivで使用

HTML：

<div class="thumbnail">
     <img src="images/thumb-01.png"/>
</div>

CSS：

.thumbnail{
     overflow: hidden;
}
于 2012-09-25T17:20:46.257 に答える
1

各画像に独自のdiv親がある場合は、divでcssオーバーフローを使用できます。画像から高さと幅を削除します。

div{
    overflow:hidden;
}
于 2012-09-25T17:19:38.903 に答える
0

このフィドルを確認してください。すべての画像に同じ幅と高さを設定します

画像の解像度が互いに大きく異なる場合は、div代わりにのを使用imgして、画像を背景として使用します。

この状況では、次を使用できます

overflow:hidden;
background-size: 100px 100px; /* CSS3 */

背景サイズを使用して、必要に応じて画像のサイズを設定できます。

于 2012-09-25T17:26:42.290 に答える
0

これは、次の方法で実現できます。

HTMLコード

<div class="kq"><div class="img_div"><img src = "sample.jpg" /></div></div>

CSSコード

.kq{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px;
font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
padding: 8px 12px 12px;
position: relative;
width : 60%;
margin : 0 auto;
margin-bottom:10px;
overflow: hidden;

}

于 2013-12-15T06:56:07.073 に答える