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

■写真を加工することなく、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>