0

これは私のコードです（画像の高さが100pxを超える場合、画像の最初の100pxのみを表示し、残りを非表示にします）：

HTML:

<div>
    <img>
</div>

CSS:

div{
    max-height:100px;
    overflow:hidden;
}

ここで、5px の境界線を追加する必要があります。

img{
    border:solid 5px #555555;
}

ただし、画像の高さが 100px を超える場合、下の境界線は表示されません。どうすれば解決できますか？

4

2 に答える 2

3

これは、div のオーバーフローが隠されているためです。代わりに、div に境界線を設定する必要があります。このように、div は画像の高さのみを占めますが、100px 以降は境界線を保持しますが、画像はそれを超えて表示されません。ただし、画像に合わせて div の幅を調整する必要があります。

<span><img src="" /></span>

span{
    max-height:100px;
    border:solid 5px #555;
    overflow: hidden;
    display: inline-block
}

img {
    width: 200px; /* image width */
    height: 200px; /* image height */
}

スパンを使用するdisplay: inline-blockと、外側のコンテナーの幅を設定する必要がなくなります。

問題:画像サイズが 未満の場合100px、画像の下部と外側のコンテナーの間に小さな隙間があります。

デモ

于 2012-06-19T15:39:20.883 に答える
0

これが必要な場合は、のぞいてみてください。

HTML (サンプル グラフィック付き):

<div>
    <img src="http://www.dummyimage.com/100x150/ffff00/fff" />
</div>​
<div>
    <img src="http://www.dummyimage.com/100x50/ffff00/fff" />
</div>​

CSS:

div {
    max-height: 100px;
    border: solid 5px #555555;
    overflow: hidden;
    display: inline-block;
}

img { margin-bottom: -5px; }​

--

  • display: inline-block、境界線を div に追加して、境界線が画像を囲むようにします
  • margin-bottomが img に追加されるため、余分なギャップが隠されます
于 2012-06-19T15:51:23.417 に答える