Esta es la respuesta más válida que encomtrarás aportar, sin embargo estúdiala detenidamente y analiza si se puede adaptar a tu trabajo.
Solución:
Existen múltiples soluciones para esto, dependiendo de los resultados que esté buscando. Pruebe el comportamiento de JSFiddle cambiando el tamaño de la celda del resultado.
1. Usando el porcentaje de ancho
Puedes establecer un porcentaje de ancho a la imagen para que se adapte al tamaño de la pantalla. Esta solución puede aumentar el tamaño de la imagen si el porcentaje es mayor que el ancho original, por ejemplo, si la imagen tiene 250 px de ancho y usa width: 50%y el ancho de la pantalla es de 600 px, la imagen se escalará hasta que tenga un ancho de 300 px.
Ver JSFiddle.
1.1 Usando porcentaje de ancho, con padre de ancho fijo
Si desea utilizar la solución anterior pero no quiere que la imagen se escale más que el tamaño original, puede establecer un padre con max-width.
Ver JSFiddle.
2. Usar puntos de interrupción
Uso de consultas de medios CSS3 para cambiar el tamaño de la imagen según el rango de ancho de la pantalla.
Ver JSFiddle.
Puede leer más sobre consultas de medios y CSS receptivo aquí.
Si no desea utilizar tamaños de consulta de medios personalizados y desea ceñirse a los puntos de interrupción específicos de Bootstrap, su CSS debe ser:
/* xs */
img
width: 100px;
height: auto;
/* sm */
@media (min-width: 768px)
img
width: 150px;
/* md */
@media (min-width: 992px)
img
width: 200px;
/* lg */
@media (min-width: 1200px)
img
width: 250px;
Ver JSFiddle. Estos tamaños están documentados aquí. xs es el valor predeterminado porque Bootstrap 3 utiliza un enfoque móvil primero.
img
width: 100%;
Esto hará que la imagen sea el 100 por ciento de su padre. Esto cambiará la imagen en consecuencia. Entonces, si el padre es col-md-4, ocupará todo el div. Entonces podrías hacer
Esa imagen en este div cambiará en relación con las clases col- si img se establece en 100%. Si no desea que la imagen ocupe todo el div, simplemente ajuste en consecuencia 75%, 50%, etc.
En lugar de especificar todas las condiciones en las que se oculta una imagen, es mejor y más limpio especificar cuándo está visible:
El navegador solo mostrará la imagen relevante en el tamaño de la ventana gráfica correspondiente, de esta manera no tiene que perder el tiempo con las consultas de medios.
Finalizando este artículo puedes encontrar las notas de otros usuarios, tú igualmente eres capaz dejar el tuyo si te gusta.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)
Utiliza Nuestro Buscador
