Почему картинка сжимается?

Question

[evomed]

Код

<div class="flex flex-wrap sm:flex-nowrap">
           <div class="w-48 mr-3 inset-0 h-48">
                        <img :src="logo_url" alt=" "
                             class="w-full h-full object-cover overflow-hidden"/>
           </div>
           <div>
               {{ description }}
           </div>
</div>

C sm экрана картинка отображается сжатой, хотя задана ширина. По факту она квадратная, а отображается полоской. Почему?

Answer 1

[Виталий Першин]

Потому что картинка в вашем случае это флекс элемент, точнее даже её обертка.
Добавьте к обертке shrink-0