画像を加工せずに切り抜き表示する コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

像を加工せずに切り抜き表示する

表示サンプル

以下のような表示を目標とします。画像の加工は一切行いません。

 →
Image

コードの説明

  • 切り抜きをするサイズ、拡大縮小比率、切り抜き位置についてはHTML側で宣言をします。
  • 切り抜きの仕組そのものについてはCSSで記述します。
  • このように分離することで、サイズや拡大縮小について自由に設定できるようになります。

HTML

<div class="image-container" style="width : 240px; height : 180px;">
  <img src="image01.png" style="transform: translate(-50%, -35%); width: auto; height: auto; " />
</div>
  • 240px、180pxのサイズで切り抜きを行います。
  • 完全に中央で切り抜く場合はtranslate(-50%, -50%)とします。
  • 今回は、顔の位置が中央より上にあるため、-35%としています。
  • これは、CSSでtop、leftによって移動させた画像について、imgの元々の基点からの相対位置について切り抜きをするためです
  • widthの値を変化させることで拡大、縮小をすることができます。
  • heightはautoとしておけば、縦横比を維持できます。

CSS

.image-container {
  overflow: hidden;
  position: relative;
  margin:auto;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
}

仕組みの説明

image-containerについて

  • 240px、180pxのサイズで切り抜きを行い、margin:auto;で中央配置しています。
  • overflowとすることで枠外にはみ出た部分を表示させないようにします。
  • imgをabsoluteにするため、position:relativeとしています。

imgについて

  • absolute、絶対配置に指定します。
  • 上部、左から50%の位置として、max-widthとmax-heightについてnoneと指定します。

まとめ

  • 切り抜きは、画像の再編集が不要なため重宝します。
  • 理解しにくいため、実際に数値を色々と変えてみて体感的に理解するとよいかもしれません。
スポンサーリンク