Cómo hacerlo: imágenes receptivas
Aprende a crear una imagen receptiva con CSS.
Las imágenes receptivas se ajustarán automáticamente para adaptarse al tamaño de la pantalla.
Cambie el tamaño de la ventana del navegador para ver el efecto de respuesta:
Cómo crear imágenes receptivas
Paso 1) Agregar HTML:
Ejemplo
<img src="nature.jpg" alt="Nature" class="responsive">
Paso 2) Agregar CSS:
Si desea que la imagen se escale tanto hacia arriba como hacia abajo según la capacidad de respuesta, establezca la width
propiedad CSS en 100 % y height
en automático:
Ejemplo
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.