素材の壺

画像のリサイズ/切り抜き〜CSS

画像のリサイズ/切り抜き〜CSS

【概要】
CSSで画像のリサイズ/切り抜きを実現。


【ポイント_CSS】
.resize_div{ width: 横幅; height: 縦幅; overflow: hidden;}
.resize_img{ width: 横幅;}


【ポイント_HTML】
<div class="resize_div">
<img src="ファイルまでのパス" class="resize_img" />
</div>


【説明】
「resize_div」
画像を囲むdivで、[ width ]と[ height ]を表示させたい画像のサイズにします。
[ overflow: hidden ]を指定する事により、指定したサイズを超えた画像が表示されずに切り抜かれます。


「resize_img」
imgに[ width ](もしくは[ height ])のみを指定すると縦横の比率を保ったまま拡大・縮小することが出来ます。
[ padding-left: -50px; ]というようにマイナスで指定する事によって左や上に画像をずらす事も出来ます。


【元画像】
雫と葉っぱ


【画像の横幅を200pxに指定】
雫と葉っぱ


【外枠のdivを100px×100pxに指定】

雫と葉っぱ

コメントする

名前
電子メール
URL
コメント
サイト内検索
TOP利用規約リンクについてお問い合わせ│相互リンク[ 素材1 ][ 素材2 ][ 素材3 ][ HP制作 ]│
無料アフィリエイトツール「アフィーノ」