
<p>ブログやサービスでは画像細部が異なることが多いかと思いますが、その際はこちらのclassを利用することで実装が可能となります</p>



<pre class="wp-block-code"><code lang="css" class="language-css">&lt;img class="object-contain h-48 w-full"&gt;</code></pre>



<figure class="wp-block-image size-large"><img loading="lazy" width="644" height="614" src="https://mokubo.website/wp-content/uploads/2021/09/Screen-Shot-2021-09-11-at-20.51.08-644x614.png" alt="" class="wp-image-4177" srcset="https://mokubo.website/wp-content/uploads/2021/09/Screen-Shot-2021-09-11-at-20.51.08-644x614.png 644w, https://mokubo.website/wp-content/uploads/2021/09/Screen-Shot-2021-09-11-at-20.51.08-300x286.png 300w, https://mokubo.website/wp-content/uploads/2021/09/Screen-Shot-2021-09-11-at-20.51.08-768x733.png 768w, https://mokubo.website/wp-content/uploads/2021/09/Screen-Shot-2021-09-11-at-20.51.08.png 1067w" sizes="(max-width: 644px) 100vw, 644px" /></figure>



<h2>参考記事</h2>



<p><a href="https://tailwindcss.com/docs/object-fit" target="_blank" rel="noreferrer noopener" title="https://tailwindcss.com/docs/object-fit">Object Fit</a></p>


Masahiro's tech note

Tailwindで画像サイズ関係なくUI統一する方法

参考記事

関連記事