Tengo fila flexible con altura máxima. el envoltorio de la imagen tiene min-height:0; propiedad para desbordamiento de altura de bloque;
pero después de cargar la imagen y reducirla, vemos que el envoltorio de la imagen no se recomputa y tiene espacio adicional (rectángulo rojo). ¿Cómo puedo volver a calcular div para reducir el ancho de la imagen?
<div class="flex max-h-[300px] justify-start bg-purple-500"> <div class="flex min-h-0 border-[5px] border-red-700"> <img class="block w-auto mx-auto border-2 border-green-700" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/> </div> </div>caja de arena https://play.tailwindcss.com/td171IEWi6
Defina una nueva clase y agréguela a la etiqueta principal de IMG (borde rojo). o puede usar el mismo nombre de clase si desea sobrescribir los valores predeterminados.
.border-red-700{ border: red 5px solid; width: max-content; position:relative; margin: auto; }también cambie la altura de la imagen igual a la altura de la etiqueta DIV (300px);
<img class="block w-auto mx-auto border-2 border-green-700 max-h-[280px]" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/>