Cómo usar CSS para escalar automáticamente la altura de una imagen

Sabemos que en los diseños de listas de imágenes, como el flujo en cascada, a menudo se puede ver el uso de CSS para controlar el ancho y el alto de las imágenes en DIV. De hecho, dicho diseño es muy simple. Hoy se lo explicaremos en detalle. .

Cuando nos encontramos con un diseño DIV CSS de este tipo, en realidad es muy simple. Solo necesitamos controlar el ancho de la imagen sin establecer la altura de la imagen, es decir, la imagen se adaptará automáticamente a la escala. relación (el valor de altura de la altura no está establecido) El valor predeterminado es la adaptación automática).

Como se muestra en la imagen de arriba, agregue una imagen CSS con un ancho de 252 px en el cuadro DIV llamado ".imgbox". El método de escritura CSS correspondiente es:

.imgbox img. {ancho: 252px} hace que la altura de la imagen del objeto se escale automáticamente según la relación de ancho.

.imgbox img{width.252px}

Este es un selector de CSS simple que se utiliza para controlar el ancho de la imagen en el cuadro DIV ".imgbox" sin establecer la altura del CSS. Aplique estilo para que la imagen predeterminada se ajuste al ancho escalado proporcionalmente.

Resumen:

Para los principiantes, es posible que hayan olvidado el ancho y el alto. Si no configuran la función adaptativa predeterminada, pueden encontrar el problema de configurar el ancho de las imágenes. Tienes que establecer el pensamiento fijo de altura. De hecho, en el diseño CSS, el ancho de la imagen es fijo y la altura debe ser adaptable. En este caso, CSS solo necesita establecer el valor del ancho y no es necesario establecer la altura para lograr el diseño ideal. efecto.

Si el alto y el ancho de la imagen son fijos en el diseño, no importa cuán grande sea la proporción de la imagen, el ancho y el alto de la imagen en el diseño son fijos. Es necesario establecer los valores fijos de ancho y alto de la imagen.

Creo que dominas el método después de leer estas explicaciones. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!

Lectura relacionada:

Cómo hacer que la altura de DIV sea adaptable

Cómo usar CSS para ocultar divs en HTML

Explicación detallada del frente -Diseño de capacidad de respuesta final, imágenes responsivas y sistema de cuadrícula personalizado