【jQuery】window幅を変えても画像の縦横比率を3:2に整えて縦画像も横画像もきれいに表示する方法

実現したいこと

  1. 縦画像は縦100%、横はauto
  2. 横画像は縦も横も100%、object-fit: coverでトリミングし、要素いっぱいに画像を表示
  3. どのwindow幅でも3:2の枠を崩さず、枠内に画像を表示

DEMO

DEMO

1.縦100%、横auto

縦画像

2.縦横100% + トリミング

横画像

3.外枠は3:2を維持

※ 3は windowの横幅を狭めたり、広げたりすると以下の「block-image」の 〇〇px が変わると思います。

HTML

<div class="container">
    <div class="row">

      <div class="col-6">
        <div class="block-image">
            <img src="https://harublog.org/wp-content/uploads/2020/12/2074332_s.jpg" alt="縦画像">
        </div>
      </div>

      <div class="col-6">
        <div class="block-image">
              <img src="https://harublog.org/wp-content/uploads/2020/12/nekocyan458A3323_TP_V.jpg" alt="横画像">
        </div>      
      </div>

    </div>
</div>

jQuery

  1. ページの読み込みと同時に関数実行
  2. ウィンドウ幅がリサイズされた時に再度実行する
$(function(){
 
    // 関数実行
    resizeBlockHeight();
   
    // 画面サイズがリサイズされたら再度読み込む
    $(window).resize(function() {
        resizeBlocknHeight();
    });


 // 初期表示
   $('.block-image img').each(function(element) {
// 画像の高さ         let height = $(this).height();
     // 画像の横幅         let width = $(this).width();

     // 横画像の場合は縦横100%でトリミング         if(width > height) {             $(this).css('height', '100%');             $(this).css('width', '100%');             $(this).css('object-fit', 'cover');         } else {
// 縦画像の場合は高さ100%で横幅は自動             $(this).css('height', '100%');             $(this).css('width', 'auto');         }    }) });
function resizeBlockHeight() {
    let block_width = $('.block-image').width();


    // 画像を囲っている枠を横3:縦2のサイズで固定
    let block_image_height = (block_width*2) / 3;
    $('.block-image').css('height',  block_height + 'px');
 
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です