css - 画像の一部を非表示にする方法は？

Question

私はこれを行う必要があります：

画像の高さが100pxを超える場合は、画像の残りの部分を非表示にします（例：高さが80pxの画像->完全な画像を表示、高さが150pxの画像->最初の100pxのみを表示）。

CSSでそれを行う方法はありますか？

score 33 · Accepted Answer

このmax-heightプロパティを使用して画像の最大の高さを指定し、overflow: hidden;それ以外のものを非表示にするために使用できます。

例えば

HTML：

<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS：

.image-container {
  max-height:100px;
  overflow:hidden;
}

編集

Internet Explorer 6の場合、CSS式を使用して次のようなものをエミュレートできます。

.image-container {
  height:expression(this.scrollHeight<100?"auto":"100px");
  overflow:hidden;
}

ただし、これにはユーザーがブラウザでJavaScriptを有効にしている必要があることに注意してください。ただし、CSS式に関する私の経験はかなり貧弱であり、避けるのが最善です。

score 8 · Accepted Answer

max-heightとの組み合わせを使用してそれを行うことができますoverflow。

HTML：

<div>
    <img>
</div>

CSS：

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

またmax-height、これは古いブラウザでは機能しませんが、通常のブラウザを使用した場合height、画像が100pxより短くなることはありません。

score 4 · Accepted Answer

4

高さ100pxのdivに入れて設定しますoverflow: hidden;

于 2012-06-18T22:45:25.993 に答える

score 2 · Accepted Answer

クリッププロパティを使用できます

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}

4 に答える 4