Cómo hacer que una imagen responda en CSS

Hay algunas maneras. Algunos sitios usan una biblioteca maestra (que tiene diferentes archivos de imagen de diferentes tamaños y resoluciones) y la información recuperada del cliente solicitante (ancho de banda, navegador, etc.) para entregar la versión de imagen mejor dimensionada para ese dispositivo. Otros cambiarán el tamaño de las imágenes “sobre la marcha”. Algunos desarrolladores usan Javascript para mejorar su automatización.

El uso de las etiquetas y con producirá imágenes receptivas. Por ejemplo, ancho: automático, recorte: escala, altura: automático, ancho máximo: 100%, todos los parámetros img {} en CSS crearán imágenes receptivas. La clave para esto es tener una imagen mínima y permitir que el navegador haga el trabajo, en lugar de intentar codificar los tamaños de imagen en la página.

¡Hay algunas buenas respuestas!

Debo agregar otra técnica que se adapte a cualquier situación.

Tuve un problema una vez que tuve que ajustar cualquier imagen en un área especial, era una imagen de perfil como la que ves en este sitio web, el problema era que había alguna imagen con un ancho muy alto, otra muy alta, así que tuve una muchos problemas

En ese caso integré las imágenes usando css!

Esto significa que tiene un div que contiene la imagen como fondo.
¡Ahora puedes manipular ese div tanto como quieras, agregando un radio de borde del 50% para hacerlo redondo!

Es muy simple, simplemente selecciona la imagen como fondo y agrega una “portada” de tamaño, luego pide que se centre en altura y ancho.

fondo: url (yourimage.jpg) centro sin repetición centro fijo;
-webkit-background-size: cubierta;
-moz-background-size: cubierta;
-o-background-size: cubierta;
tamaño de fondo: cubierta;
tamaño de fondo: 100% 100%;

Parece una exageración para alguien que está aprendiendo css / html, pero un día recordarás que ese tipo en Quora tiene una solución para un problema que conoces ahora … 6 meses después.

Puede establecer un ancho y un ancho máximo en CSS para esa imagen. Además, para mantener la relación de aspecto, debe establecer la altura en automático. Esto es un ejemplo:

img.img-responsive {
ancho: 480px;
ancho máximo: 100%;
altura: auto;
}

Tenga en cuenta que probablemente debería colocar su imagen dentro de un contenedor. De esta manera, si el ancho del dispositivo es lo suficientemente grande, la imagen tendrá un ancho de 480 px. Cuando el ancho del dispositivo es más pequeño, la imagen usará el valor de ancho máximo (en mi ejemplo, 100%), de acuerdo con el ancho de su contenedor.

Sin embargo, es posible que desee establecer un tamaño px o rem para la imagen del logotipo y centrarlo, digamos, en la barra de navegación. En este caso, usaría consultas de medios para establecer diferentes anchos para la imagen para diferentes tamaños de pantalla. Me gusta esto:

@media screen y (ancho máximo: 480px) {
img.logo {
ancho: 100px;
altura: auto;
}
}

Use porcentaje en lugar de píxeles para dimensionar. Entonces, en lugar de ancho: 800px; usaría, por ejemplo, ancho: 70%; Esto permite que la imagen sea un porcentaje del tamaño de la pantalla en lugar de un valor sólido.

Si esto ayuda, ¡por favor vota esta respuesta!

Si no desea que su imagen se distorsione, envuelva la imagen con un div. Fijar la altura y el ancho del div. Ahora haga su imagen Ancho: 100%; Altura: auto . O incluso puede usar la propiedad object-fit: cover en su imagen. Ayuda a mantener la propiedad de la imagen y también ayuda con la distorsión. Pero recuerde Object-fit: cover no funciona con IE.

establecer es CSS para ser
.img-responsive {
bloqueo de pantalla;
ancho máximo: 100%;
altura: auto;
}

¡y eso es!

Para lograrlo, debe crear una clase CSS para sus imágenes.

Aquí hay un ejemplo a continuación:

.img {

ancho: 100%;

altura: auto;

}

¡Espero que esto ayude!

Bootstrap utiliza ciertos elementos HTML y propiedades CSS que requieren el uso del doctype HTML5. Inclúyalo al comienzo de todos sus proyectos.

Si está utilizando bootstrap … use las clases “img-responsive” para imágenes receptivas y “img-circle” para imágenes de máscara redondeadas

Establezca el ancho 100% y la altura automática.

Ejemplo de CSS:

img {

ancho: 100%;

altura: auto;

}

Si tiene varias imágenes que son iguales al tamaño de todas las imágenes.

img {

ancho: 100%;

altura: auto;

}

será flexible

o usar

img {

ancho: 10vw;

altura: 10vw;

}

use la propiedad css para establecer el ancho de img = ”100%” si está usando bootstrap use class = ”img-responsive”