CSSを使用して画像のアスペクト比を保つ方法

1. paddingとheightを使用する方法:

   HTML:
   <div class="image-container">
   <img src="image.jpg" alt="画像">
   </div>
   CSS:
   .image-container {
   position: relative;
   width: 100%;
   padding-top: 75%; /* アスペクト比を設定 */
   }
   .image-container img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   }

   この方法では、親要素のpadding-topの値をアスペクト比に合わせて設定し、子要素のimgには絶対位置を指定して全体を覆うようにします。

2. CSSのaspect-ratioプロパティを使用する方法 (CSSの新しいバージョンで利用可能):

   HTML:
   <div class="image-container">
   <img src="image.jpg" alt="画像">
   </div>
   CSS:
   .image-container {
   aspect-ratio: 16/9; /* 画像のアスペクト比を設定 */
   }
   .image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   }

   この方法では、親要素にaspect-ratioプロパティを使用して直接アスペクト比を設定します。ただし、このプロパティは一部のブラウザでしかサポートされていないため、互換性に注意してください。

3. JavaScriptを使用してアスペクト比を保つ方法:

   HTML:
   <div class="image-container">
   <img id="image" src="image.jpg" alt="画像">
   </div>
   JavaScript:
   window.addEventListener('resize', function() {
   var image = document.getElementById('image');
   var container = document.getElementsByClassName('image-container')[0];
   var aspectRatio = image.naturalWidth / image.naturalHeight;
   container.style.paddingTop = (100 / aspectRatio) + '%';
   });

   この方法では、JavaScriptを使用してウィンドウのリサイズイベントを監視し、アスペクト比に基づいて親要素のpadding-topを動的に変更します。

これらはいくつかの一般的な方法ですが、他にもさまざまな方法が存在します。選択した方法は、使用するコンテキストや要件に応じて最適なものを選ぶことが重要です。