Italiano
Română
Русский¿Las 3 a la vez?: Redimensionamiento responsive de imágenes + ancho de imagen real para imágenes pequeñas + ancho máximo para imágenes grandes
Lo que me gustaría lograr es tener imágenes que se redimensionen de forma responsive - y para eso tengo que establecer 'width: 100%' - y al mismo tiempo establecer un ancho máximo para que la imagen no sea tan ancha como el contenido
Para hacer eso uso:
img {
max-width: 100%;
height: auto;
width: 100%; /* para hacer la imagen responsive */
}
#content img {
max-width: 690px;
}
Entonces la imagen es responsive - ¡pero el problema es que en caso de que el ancho de la imagen sea menor a 690px el ancho de la imagen es demasiado grande!
Si solo uso esto:
img {
max-width: 100%;
height: auto;
}
El tamaño de la imagen (ancho y alto) es correcto, pero la imagen no es responsive.
¿Cómo logro las tres cosas?
- Redimensionamiento responsive del tamaño de la imagen
- Ancho de imagen del tamaño real en caso de que el ancho verdadero sea menor a 690px
- Ancho de imagen de 690px para todas las imágenes más grandes
Esta es una imagen cuyo ancho real es menor a 690px y donde se puede ver el problema.
Se me ocurrió una especie de solución, pero como es más un arreglo temporal que una solución adecuada al problema específico, la agrego aquí.
La solución alternativa es usar un CSS diferente para tamaños de ventana más pequeños. Para ventanas más grandes esto:
img {
max-width: 100%;
height: auto;
width: auto; /* La imagen se hace responsive más abajo para ventanas más pequeñas (@ 800px) */
}
#content img {
max-width: 690px;
}
Y luego para ventanas más pequeñas:
@media only screen and (max-width: 890px) {
img {
width: 90%; /* para hacer la imagen responsive */
}
}
¡Gracias por tu respuesta! ¿No es esto exactamente lo que mencioné como mi solución donde "el tamaño de la imagen es correcto, pero la imagen no es responsiva"? ¿Por qué funciona para ti pero no para mí entonces? ¿Hay algún otro aspecto de mi CSS que lo estropee...?
user2656065
1) estás obteniendo las imágenes como responsivas, 2) cuando la imagen real es mayor de 690px se reduce a 690px. Pero tu problema es que tus imágenes más pequeñas también se estiran hasta 690px... ¿estoy en lo cierto? Corrígeme si me equivoco.
Zammuuz
¡Exactamente! Cuando una imagen es más pequeña que 690px, se estira hasta 690px (como la que enlacé). No sé cómo evitar que las imágenes más pequeñas se estiren hasta 690px.
user2656065
ok..mira mi respuesta actualizada
Zammuuz
Desafortunadamente esto no funciona. Si configuras width: auto; entonces la imagen ya no cambia de tamaño.
user2656065
Algunos de los comentarios debajo del artículo parecen sugerir que si las imágenes son demasiado pequeñas no se ajustarán, así que con suerte esto resolverá tu problema de mantener las imágenes más pequeñas sin estirar
Bysander
¿Has visto (y probado) el comentario de @G.M. en la pregunta original?
kaiser