読者です 読者をやめる 読者になる 読者になる

yuri memo

コーディングとかのメモ帳

CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応)

f:id:yurixxx8:20170408172723j:plain

レスポンシブサイトでサムネイルなどを一覧表示させたいときに
写真のサイズがバラバラだとなかなかうまくいかず困ってました。

以前、background-sizeがいいかも!と記事を書きましたが
object-fitのポリフィルが使えるようになり、これは!!と思いました。
object-fitについては以下の記事を参考に。
参考:1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

で、さっそくやってみたのですが
widthとheightをきちんと指定すればうまくいきます。
IEだってばっちりです。

ですが、heightを指定すると可変するときにいい感じにならない、、
f:id:yurixxx8:20170408164227p:plain
指定しなければ縦長の画像が、、
f:id:yurixxx8:20170408164238p:plain
(いい方法ご存知の方おりましたら教えてくださいm(_ _)m)

わたしの実装したいことはobject-fitだとうまくいかなそうと諦め、
フォロワーさんに助けを求め、記事を読み漁った結果、完成形はこちら。
http://yurixxx8.com/demo/20170408/photo_trimming.html

画像のアスペクト比も保持しつつ、縦長画像もいい感じにおさまります。

今回は画像の中心でトリミングしてます。
画像トリミングに関する箇所のみ抜粋してコードを載せていきますね。

<div class="cardItem">
  <div class="trimming">
    <img class="photo" src="images/sample_photo_01.jpg" alt="Green leaves">
  </div>
  <div class="body">
    <p class="text">Green leaves</p>
  </div>
</div>
.trimming {
  overflow: hidden;
  position: relative;
  padding-top: 65%;
  margin-bottom: 5px;
}
.photo {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.trimming
トリミングする外側のクラスです。
position: relative;を指定します。
overflow: hidden;ではみ出した分をカットします。
padding-top: 65%;で高さをとっています。
これによって、heightを指定せずともアスペクト比を保持したまま画像の高さがだせます。
参考:CSSだけでアスペクト比を固定するテク - Qiita

.photo
position: absolute;を指定します。
画像の中心でトリミングしたいので以下のように指定します。

top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

参考:CSSだけで画像トリミングできたよ | Tips Note by TAM

ざっとこんな感じです!
サムネイル画像をbackground-imageとして扱うことがどうしてももやもやだったので
imgタグで実装できてとてもすっきりです٩( 'ω' )و