0

元の画像の高さが500ピクセル、幅が400ピクセルであると仮定します。この画像をウェブサイトに表示して、高さが480ピクセルだけになるようにします。これはcssを使用して可能ですか？よろしくお願いします

4

3 に答える 3

1

画像の高さがわからず、画像を切り取る必要がある場合は、負の余白を使用できますoverflow: hidden（左は画像のまま、右はトリミングされます）。

HTML

<div class="crop">
    <span><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></span>
    <strong><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></strong>
</div>​

CSS

.crop {overflow: hidden;}
.crop strong {display: inline-block; overflow: hidden; margin-bottom: -50px;}
.crop strong img {display: block; margin-bottom: -20px;}​

デモ

CSSを使用してトリミングされた画像

http://jsfiddle.net/xULaP/でデモをチェックしてください。

于 2012-07-06T03:32:01.157 に答える
0

うん：画像を要素の背景として設定し、その要素の幅と高さを指定します。JSFiddleの例

于 2012-07-06T03:20:33.720 に答える
0

切り抜くには、外側の<div>withoverflow: hiddenとその結果の設定された幅と高さを使用して、その中に画像を入れてから、余白を使用して切り抜くことができます。マージン値は、元の高さとトリミングされた高さの差になるため、この場合は20pxになります。

http://jsfiddle.net/DjyzK/1/

DIVに境界線を追加して、それがどこにあるかを確認できるようにしました。

絶対位置は単純にそこにあるので、ページの端を抱いていないときにそれを見ることができます。

画像の高さ/幅がわからない場合は、Praveenのソリューションのこのフォークを試してください：http：//jsfiddle.net/xULaP/1/

お役に立てれば！

于 2012-07-06T03:27:33.237 に答える