スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-19 DIV領域のOverflow: hidden; で画像のトリミング

 前回は、CLIPでトリミングをしましたが、今回はサイズの決められたDIV領域におかれたサイズより大きい画像を表示するスタイルとして、オーバーフローがあります。何も指定しなければDIV枠が広がりますが、オーバーフローをHIDDENに設定すると、あふれた画像を隠してくれます。
 下の例では、500×250ピクセルのDIV領域に、550×366ピクセルの画像を絶対配置でマイナスの値で配置して、見せたい部分だけ表示させています。

DIV領域のスタイルは
style="position:relative; overflow: hidden;width:450; height: 250;border: ridge 5px;"
画像のスタイルは以下です
style="position:absolute; top:-10px; left:-60px;"



<div style="position:relative; overflow: hidden;width:450; height: 250;border: ridge 5px;">
<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723631954bd6b8bb697db_import.jpg"
style="position:absolute; top:-10px; left:-60px;"></div>

元の画像

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。