画像の上半分と同じ画像の下半分だけを2つの別々のdivで表示しようとしています。
CSSプロパティを試してみましたが、clip％を単位としてサポートしていないようです。
私だけでしょうか？画像の半分だけを表示するための解決策はありますか？
24689 次
4 に答える
26
更新 (5 年以上後):
CSS クリップ プロパティは非推奨になりました。代わりに clip-path を使用することを検討してください (非 JS ソリューションを許可します)。これにより、パーセンテージで形状を指定できます。例：
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
パーセンテージを使用して三角形を作成するその他の例:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
オリジナル: CSS クリップ プロパティは現在パーセンテージをサポートしていません: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip、最新のhttp://www.w3.org/TR/2011/REC- CSS2-20110607/visufx.html#clipping
問題の解決策は、Javascript を使用して表示する領域のサイズを決定し、その値を使用してクリッププロパティを設定することです。これと同じくらい簡単なことでうまくいくはずです：
var heightOfImageToDisplay = image.height / 2;
于 2011-11-23T12:38:45.603 に答える
0
固定の高さの画像 と 固定の高さ を使用しdivていて、これを手動で行っている場合は、画像を背景として配置してoverflow:hidden、適切な画像をbackground-position上から下に、下から下にのみ表示しないのはなぜですか?
于 2011-11-23T15:06:17.303 に答える
0
divを次position: relative;のように使用しoverflow: hidden;
、画像を内部に次のように使用できますposition: absolute;
画像の表示方法を制御しますが、高さを div に設定し、画像の上部と下部のプロパティを調整します
于 2011-11-23T12:39:25.967 に答える