プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2017.10.30更新

CSSだけでサムネイル画像を作る。全てのパターンをご紹介します!

Attention!

もと画像の一部分を切り出したり、サイズを自動調整したりして作る「サムネイル」画像は、ブログやギャラリーなどの一覧表示に多用されます。このサムネイルの設定が適切でないと、一覧表示がバラバラな印象になったり、何の画像なのか?がわかりにくくなったりするので、大切なポイントの一つです。そこで、縦・横・センターのそれぞれに合わせるサムネイル画像の作り方をご紹介します。CSSのみで設定できますので、是非覚えておきましょう!

1まず、htmlの構造からご紹介します
<!-- imgタグの外枠をつくります。ここではdiv要素を使い、trimというクラスを付けました -->

<div class="trim">
   <img src="○○○○○○○○○○○○○○○○" alt=" >
</div>

 

【この画像をサムネイルにしていきます】

 

上記では、外枠に<div>タグを使っていますが、<p><i>などブロック要素であれば問題ありません。

リンク表示として<a>タグを使う場合には、CSSに display:block;を設定してブロック要素に変換しましょう。

2外枠にサイズを指定して、【 overflow : hidden ; 】を設定して切り取ります。
/* トリミングする外側の枠 */

.trim {
    overflow: hidden;
    width: 200px;/* トリミングしたい枠の幅 */
    height: 200px;/* トリミングしたい枠の高さ */
  }

 

縦・横の寸法が200pxのサイズでトリミング(黒い部分は非表示化)されます。ただ、このままの設定だと左上から画像の端を切り取ってしまうので、何の画像なのか?わかりにくく、表示として良くありません。そこでCSSを追加して切り取る画像位置やサイズを調整します。

3画像の縦(高さ) 100%に合わせる場合
/* トリミングする外側の枠 */
.trim {
     overflow: hidden;
     width: 200px;/* トリミングしたい枠の幅 */
     height: 200px;/* トリミングしたい枠の高さ */
}


/* 高さに合わせてリサイズ、はみ出た分をトリミング */

.trim img {
    width: auto;
    height: 100%;
}

 

【height: 100%;】と【width: auto;】を追記します。

これで画像の比率を保ったまま、縦幅いっぱいに画像を自動調整できます。

4画像の横(幅) 100%に合わせる場合
/* トリミングする外側の枠 */

.trim {
     overflow: hidden;
     width: 200px;/* トリミングしたい枠の幅 */
     height: 200px;/* トリミングしたい枠の高さ */
}


/* 横幅に合わせてリサイズ、はみ出た分をトリミング */

.trim img {
    width: 100%;
    height: auto;
}

 

横幅100%に合わせる場合には、

【height: auto;】と【width: 100%;】を追記します。

5センターの位置を指定して、画像の中心をトリミングする場合
/* トリミングする外側の枠 */

.trim {
     overflow: hidden;
     width: 150px;/* トリミングしたい枠の幅 */
     height: 150px;/* トリミングしたい枠の高さ */
     position: relative;
}


/* 縦・横センターに合わせて、サイズ調整せずに、はみ出た分をトリミング */

.trim img {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

 

この設定では、画像サイズは調整されず(元画像のサイズのまま)、外枠に合わせて画像の中心部分を切り抜く表示になります。

外枠の.trimに【position: relative;】を設定して起点をつくります。

中身のimgには【position: absolute;】と【 transform : translate();】を設定して画像の位置をセンターに合わせています。

6縦(高さ)100%に合わせてサイズ自動調整、さらに画像をセンターに合わせる方法
/* 高さに合わせてリサイズ、はみ出た分をトリミング */

.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%;
}

 

高さ100%に合わせて、さらに左右をセンターに合わせる事ができます。

7横(幅)100%でサイズ自動調整、さらに画像をセンターに合わせる方法
/* 横幅に合わせてリサイズ、はみ出た分をトリミング */

.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;
}

 

横幅 100%に合わせて、さらに上下をセンターに合わせる事ができます。

8画像の縦と横のサイズの大きい方に合わせて自動調整する場合
/* 画像の縦と横、大きいほうに合わせてリサイズ */

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

  

 

もと画像は横向きなので、上記のようにサムネイル(外枠)の寸法が変わる場合には、

横幅100%に自動調整されると縦に隙間ができます。

トップへ