CSS CSSでの画像トリミング

2020-05-18

画像のトリミング方法はいくつかありますので、今回はそのうちの１例をご紹介します。

ざっくりとした方法としては、div等で囲み、ブロック要素の指定、overflowではみ出している部分はカットする形になります。

【サンプルとなる画像はこちら】

<div class="sample">
    <img src="画像ファイルのパス">
</div>

</div>

縦幅に合わせたトリミング

.sample {  /* この指定は、下記では共通としていますので、省略します */
    position: relative;
    display: block;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.sample img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}

.sample { /* この指定は、下記では共通としていますので、省略します */

position: relative;

display: block;

width: 300px;

height: 300px;

overflow: hidden;

}

.sample img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: auto;

height: 100%;

}

横幅に合わせたトリミング

.sample img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.sample img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

height: auto;

}

といったように、縦基準/横基準といった形で、トリミングをすることができます。
位置の調整は、marginで調整することもできますが、画像サイズが違うと個別に値を設定することになりますが、transformを使うことで、個別に指定しなくても対応できるようになります。

.sample img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
    height: auto;
}

.sample img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -40%);

width: 100%;

height: auto;

}

というように、{transform} の調整をすることで、縦位置や横位置をズラすこともできます。
ただし、いくつか画像があり、サイズもバラバラという場合、この指定で調整すると、見栄えがおかしくなるかもしれませんので、中心基準の方が良いかもしれません。
または、{ top: 0%; left: 0%; }として、{transform} の記述をなくし、左上基準で統一という方が良いかもしれませんね。

余談

この写真は、私が以前旅行に行った先で、何気なく撮影しました。
自分でいうのもなんですが、結構いい感じだと思います。笑。