imgタグなどで縦横の長さを固定にしたとき、縦横比が違う画像を表示したりした際につぶれちゃったり伸びちゃったりしますよね。そんなとき、多少切り抜いても問題ない画像の場合にはcssで工夫すれば簡易切り抜き表示ができたりします。つい先日、仕事でコーディングをしていた際、要素をカード風に表示をしようとしていて使ったのでここでご紹介しようかと。内容は画像とタイトル、本文抜粋という単純な組み合わせです。
切り抜きする前の状態
実際の画面はこんな感じ。見事に縦長の写真が上下につぶれちゃってます。コードでみると
【html】
<div id="cardlist">
<div class="card">
<img src="IMAG0216.jpg" alt="日比谷公園">
<h2>秋の日比谷公園</h2>
<p>
気持ちのいい昼下がりに、仕事場から日比谷公園まで散歩。
運動不足解消もかねてだったんですが、気持ちのいい休憩時間を過ごせました。
</p>
</div>
</div>
【css】
.card {
width: 200px;
margin: 1rem;
padding: 1rem;
border: dotted 2px gray;
}
.card img {
width: 100%;
height: 200px;
}
.card h2 {
font-size: 16px;
}
.card p {
font-size: 12px;
}
簡易切り抜きを反映させると
無事、比率のあった切り抜きなりました。簡易というだけに、写真任意での切り抜きではないですが、これでも違和感は十分に減ると思います。実際に追加や変更したのはhtml部分では
<span class="kirinuki"><img src="IMAG0216.jpg" alt="日比谷公園"></span>
spanじゃなく、divでもいいと思います。imgをクラス名kirinukiのタグで囲んで、htmlは修正終了。cssの方は追加したkirinuki部分のスタイルを記述
.kirinuki {
display: block;
width: 100%;
height: 200px;
overflow: hidden;
}
spanなのでブロック要素にして、幅は親要素の100%。高さをカード画像用の200pxに設定。次にoverflowを使用して、はみ出た部分を非表示処理してます。これにより、imgではみ出しちゃったりした部分が見えないようになります。さらに、img部分のスタイルも縦の長さ（height）部分をコメントアウトしてます。
.card .kirinuki img {
width: 100%;
/*height: 200px;*/
}
長さの指定をなくしたことで、本来は素材の比率に合わせた長さで表示されるところなのですが、はみ出た部分を非表示処理していることで、簡易的に切り抜きをしたような表示が可能になってます。全体のコードは以下に。
今回のコード
【html】
<div id="cardlist">
<div class="card">
<span class="kirinuki"><img src="IMAG0216.jpg" alt="日比谷公園"></span>
<h2>秋の日比谷公園</h2>
<p>
気持ちのいい昼下がりに、仕事場から日比谷公園まで散歩。
運動不足解消もかねてだったんですが、気持ちのいい休憩時間を過ごせました。
</p>
</div>
</div>
【css】
.card {
width: 200px;
margin: 1rem;
padding: 1rem;
border: dotted 2px gray;
}
.kirinuki {
display: block;
width: 100%;
height: 200px;
overflow: hidden;
}
.card .kirinuki img {
width: 100%;
/*height: 200px;*/
}
.card h2 {
font-size: 16px;
}
.card p {
font-size: 12px;
}
まとめ
仕事で切り抜いていた画像がスマホサイトのものだったりしたので、縦長のものでした。これが横長のものの場合、縦横を入れ替えて処理すればたぶん問題ないはず。あくまで簡易なので、狙った切り抜きをしたい場合はcss3のtransformを使えば、画像の縮小や表示位置の調整もできます。ただ、そこまでこだわらなくていいものであれば、上記の方法でも十分違和感のない画像が表示できるかと思いますよ。