tailwindcssで画像のアス比を固定する

<p><code>object-contain</code> を使えばよい。</p>
<pre><code class="hljs language-jsx">&lt;img <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;object-contain&quot;</span> src=<span class="hljs-string">&quot;/image.jpg&quot;</span> /&gt;
</code></pre>
<h2>どうなっているのか</h2>
<p>css の <code>object-fit: contain</code> を使っている。</p>
<blockquote>
<p>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。</p>
</blockquote>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/object-fit">object-fit - CSS: カスケーディングスタイルシート | MDN</a></li>
</ul>
<p><code>object-fit</code> 知らなかった。昔は画像のアスペクト比を固定するためにiframeを使ったり四苦八苦していたこともあったようだが便利な世の中に生まれてよかった。</p>
<h2>参考</h2>
<ul>
<li><a href="https://www.swjh.io/blog/preserve-aspect-ratio-of-images-with-tailwind-css/">How to preserve Aspect Ratio of Images with Tailwind CSS — swjh.io</a></li>
</ul>
