WordPress等で画像をアップする際、サイズを調整するために加工するのって手間でもあるし、
PCに詳しくない人に更新をお願いする場合にはなるべく簡単にしたいですよね。
今回は更新が劇的に楽になる！？CSSで画像をトリミングする方法をご紹介します。
この画像をトリミングします
HTML
[xml]
<div class="trim">
<img src="https://awd-web.com/wp/wp-content/uploads/20170608_1.png" alt="" />
</div>
[/xml]
CSS
[css]
.trim {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}
[/css]
.trim {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}
[/css]
画像をdivでくくり、トリミングしたいサイズを設定します。
はみ出た部分はoverflow:hiddenで切り取り。
横幅に合わせてトリミング
CSS
[css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
[/css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
[/css]
RESULT
高さに合わせてトリミング
CSS
[css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
[/css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
[/css]
RESULT
中央に合わせてトリミング
CSS
[css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
[/css]
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
[/css]
RESULT
サイズの拡大縮小はなしで、純粋に画像をトリミングしたい場合に便利です。
気を付けたいこと
見せたい部分が端っこによっている場合、この方法でトリミングするとそれが見えなくなる場合もあります。
また、使用する画像が縦長だったり横長だったりバラバラだと、
画像が並んだ時に上下左右にスペースができることもあります。
ですので、使用する画像のサイズはできるだけ同じにするといいかもしれません。
とても便利ですので、ぜひお試しくださいv(*´ω`*)
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。