bnsgt's diary

個人的な備忘と日記

どんな縦横比の画像でもCSSとJavaScriptで丸くトリミングする方法

※前回の記事の応用で、どんな縦横比の画像でもcssJavaScriptで丸くトリミングする方法のメモ

 

方法

  • 画像の親要素(figureタグ)に、.circle_figというclassを適用し、imgタグに.circle_imgというclassをつける。
  • JavaScript側で判別されて付与されるclass(.is_horizontalと.is_vertical)によって、widthとheightの値を出し分ける。
  • 大抵の場合、使う場所により画像の大きさが異なるので、circle_figに対し、ユニークなclass(ここではunique_fig_a,unique_fig_b)を適用し、そのclassに対し、widthとheightを指定する。※サイト内で一つしかない場合は、circle_figにそのまま適用しても大丈夫

HTML

<figure class="circle_fig unique_fig_a">
    <img src="http://placehold.jp/300x150.png" alt="" class="circle_img js_circle_img">
</figure>
<figure class="circle_fig unique_fig_a">
  <img src="http://placehold.jp/150x300.png" alt="" class="circle_img js_circle_img">
</figure>
 
<figure class="circle_fig unique_fig_b">
    <img src="http://placehold.jp/500x300.png" alt="" class="circle_img js_circle_img">
</figure>
<figure class="circle_fig unique_fig_b">
  <img src="http://placehold.jp/300x500.png" alt="" class="circle_img js_circle_img">
</figure>

CSS

.circle_fig {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
}
/* 縦長画像の場合 */
.circle_img.is_vertical {
  width: 100%;
  height: auto;
}
/* 横長画像の場合 */
.circle_img.is_horizontal {
  height: 100%;
  width: auto;
}
/* 使う場所によって、画像の親要素のwidth,heightを指定 */
.unique_fig_a {
  width:100px;
  height:100px;
}
.unique_fig_b {
  width:200px;
  height:200px;
}

JavaScript

window.onload = function() {
  /**
  * 画像の縦長 or 横長判定処理
  */ 
  const circleImage = document.getElementsByClassName('js_circle_img');
  for ( let i = 0; i < circleImage.length; i++) {
    const img = new Image();
    img.src = circleImage[i].getAttribute('src');
    if((img.width / img.height) >= 1){
      // 横長の場合に、is_horizontalをつける
      circleImage[i].classList.add('is_horizontal');
    }else{
      // 縦長の場合に、is_horizontalをつける
      circleImage[i].classList.add('is_vertical');
    }
  }
}

以上のコードを試してみて、ブラウザで下の画像のようになれば成功。

どんな縦横比の画像でもcssとjavascriptで丸くトリミングする

JavaScriptを使いたくない場合

表示のパフォーマンスなどを考慮して、JavaScriptを使いたく無い場合は、object-fit: cover;が効かないieの場合に縦長の場合横が切れるか、横長の場合縦が切れるかの選択が必要。

HTML

<figure class="circle_fig unique_fig_a">
    <img src="http://placehold.jp/300x150.png" alt="" class="circle_img js_circle_img">
</figure>
<figure class="circle_fig unique_fig_a">
  <img src="http://placehold.jp/150x300.png" alt="" class="circle_img js_circle_img">
</figure>
 
<figure class="circle_fig unique_fig_b">
    <img src="http://placehold.jp/500x300.png" alt="" class="circle_img js_circle_img">
</figure>
<figure class="circle_fig unique_fig_b">
  <img src="http://placehold.jp/300x500.png" alt="" class="circle_img js_circle_img">
</figure>

CSS

.circle_fig {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
}
.circle_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ie対応 */
@media all and (-ms-high-contrast: none) {
  .circle_img {
    height: auto;
    /* 
    縦長の場合横が切れるようにしたい場合は width:auto;にする
    width: auto;
    */
  }
}
/* 使う場所によって、画像の親要素のwidth,heightを指定 */
.unique_fig_a {
  width:100px;
  height:100px;
}
.unique_fig_b {
  width:200px;
  height:200px;
}