img - Responsive Image vs especifica el ancho y el alto de una imagen en HTML

responsive background image

Question

Estoy leyendo sobre diseño receptivo y noté el siguiente problema:

Una de las recomendaciones con respecto a "Fluid Images" es usar una regla CSS como:

img {
max-width: 100%;
height: auto; }

pero para que tenga el efecto correcto, debemos quitar los atributos de ancho y alto de la imagen en línea de la etiqueta img.

¿Cómo se conforma esto con Es importante especificar el ancho y alto de una imagen en HTML ?

Gracias

Answer 1

Aunque (como indiqué en mi otra respuesta) los atributos de width y height no interfieren con las imágenes fluidas, las imágenes fluidas interfieren con las imágenes aún no cargadas ocupando la cantidad de espacio adecuada en navegadores distintos de Chrome. Hay una solución para esto: ajuste la imagen en un div con una proporción intrínseca, como se describe en este artículo: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image''s height divided by its width */
}

Desafortunadamente, esto requiere dos divisores de envoltura, para obtener el efecto de máximo ancho correcto. Sin embargo, proporciona las mismas ventajas a la velocidad de carga aparente que proporcionan los atributos de width y height . Es posible que desee otorgar .img-wrapper overflow: hidden .img-wrapper overflow: hidden para ocultar parte del comportamiento patológico de IE más antiguo.

jsFiddle: http://jsfiddle.net/7j3db/32/

Answer 2

No necesita quitar los atributos de ancho y alto de la imagen.

jsFiddle: http://jsfiddle.net/7j3db/

Probado en Chrome, Firefox, Opera, IE9 e IE9 emulando IE7. Parece funcionar bien en todos ellos, con la regla CSS exacta que mencionaste.

EDITAR: Probado con una imagen que no se pudo cargar: http://jsfiddle.net/7j3db/1/

Esto tuvo el efecto apropiado en Chrome e IE (incluso IE7), pero no en Firefox u Opera. Sin embargo, incluso en Firefox y Opera, el efecto era mejor que si los atributos de ancho y alto se dejaran fuera (porque el atributo de ancho todavía tenía un efecto, aunque el atributo de altura no lo hiciera).

Pruebas adicionales con texto alternativo ( http://jsfiddle.net/7j3db/2/ ): manejado perfectamente por IE7, pero IE9 se une a Opera, e IE8 hace algo realmente extraño (la altura de la imagen depende de la longitud del texto alternativo; más texto alternativo, menos espacio). Chrome parece ignorar por completo el texto alternativo. Opera y FF muestran el texto alternativo, pero por lo demás tienen esencialmente el mismo comportamiento que antes. Sin embargo, los atributos de ancho y alto no parecen ser responsables de ninguno de estos problemas de texto alternativo (excepto en IE8, hasta cierto punto).

Answer 3

Puedes lograr esto agregando

html, body{
max-width:100%;
width:100%;
}

y también poniendo estas propiedades en el div principal de la etiqueta img.