Celda de cuadrícula desbordante de imagen
Sam
Tengo un código muy simple con una cuadrícula y un elemento de imagen dentro. La cuadrícula debe tener el 70% de la altura de la pantalla y anticipé que la imagen estará contenida dentro. Por alguna razón, la imagen se desborda.
El código:
<div className="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
<img src={homeImage_desktop} alt='' className='ml-auto' />
</div>
Resultado:
Puedo cambiar el tamaño de la imagen manualmente 70vh, pero prefiero que la imagen cambie de tamaño automáticamente para que se ajuste al padre.
sangre oriental
Agregarmax-h-full max-w-full min-w-0 min-h-0
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
<img class="max-h-full max-w-full min-w-0 min-h-0 ml-auto" src="https://images.unsplash.com/photo-1643131747793-1b103cc66c6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80" alt='' />
</div>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Editado en
Artículos relacionados
TOP Lista
- 1
¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)
- 2
Limitar las entradas de One2many Lines en odoo
- 3
Ver todos los comentarios en un video de YouTube
- 4
Declaración if simple en intérprete de python
- 5
¿La mejor manera de construir la GUI de Java Swing?
- 6
Cómo conectar Flutter con MongoDB
- 7
Leer Azure Key Vault Secret de la aplicación Function
- 8
Importar archivo js con TypeScript 2.0
- 9
BeautifulSoup: extraer texto de la etiqueta de anclaje
- 10
Cerrar el menú de material angular desde el controlador
- 11
Error de menú desplegable en Bootstrap 4
- 12
La mejor manera de iterar SortedSet / SortedMap en Java al revés
- 13
¿Precedencia de operadores?
- 14
Google 스프레드 시트 : QUERY를 사용하여 그룹 내 상위 N 개 케이스 선택
- 15
Intentando reproducir mp3 usando Vue.js
- 16
Extraction du nœud enfant de la réponse JSON à l'aide du script SoapUI-Groovy
- 17
Comparer des images dans Pygame (pas pixel par pixel)
- 18
Estructura de la carpeta del proyecto Spring Boot para el cliente de descanso
- 19
Validación de formulario Angular 4
- 20
La mejor manera de leer archivos binarios estructurados con Java
- 21
cómo usar% dopar% cuando solo se importa foreach en la DESCRIPCIÓN de un paquete
Déjame decir algunas palabras