お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

画像を加工せず、一部だけ切り取って表示する方法

WEBデザイン
■写真を加工することなく、WEB上の表示だけで一部だけを切り取って表示する方法

以下の写真を例に

(写真:茜さやPAKUTASO
スポンサーリンク
スポンサーリンク
切り取りたい大きさの枠を用意します。
写真より枠が小さい場合、そのまま写真を表示すると画像が枠をはみ出してしまいますが「overflow:hidden;」を指定する事ではみ出した部分は非表示になります。
<div style="width:150px;height:150px;overflow:hidden;"> <img src="./ass002.jpg" />
</div>
画像は左上を基点としてしか表示されないため position・left・top を使用して表示位置を移動します。
<div style="width:150px;height:150px;overflow:hidden;"> <img src="./ass002.jpg" style="position:relative;left:-81px;top:-30px;" /> </div>

コメント