Cómo resolver el problema de la adaptación de ancho y alto de los navegadores móviles

La solución al ancho y alto adaptable de los navegadores móviles es utilizar el siguiente CSS:

. Imagen de contenido {

Ancho máximo: 100;

Alto: automático

}

Pero la etiqueta img de la imagen en el La página web es como esta:

ltImg alt= "La 25.ª Exposición de Arte Fotográfico de Hubei" src = " h/20140606063027270 . jpg " estilo = " alto: 337 px; ancho: 600 px" gt

Tenga en cuenta que el atributo de estilo en la etiqueta img define la altura, por lo que CSS no puede anular el estilo.

Así que pensé en usar PHP para eliminar la definición CSS de altura en la etiqueta img al generar la página. El código es el siguiente:

$ content = preg_replace('/([^gt;]*)(Altura: [0-9] px;)([^lt; gt]*)/i ',' $1$3 ', $ content);

Después del reemplazo, la etiqueta img queda así:

ltImg alt= "La 25ª Exposición de Arte Fotográfico de Hubei" src = "/ 201406063027270 jpg " style = " width: 600 px; gt

Bien, la imagen se puede adaptar en el navegador móvil

¿Por qué es fácil decir esto? , es la pantalla del móvil. El ancho se puede resolver definiendo el ancho máximo, pero la altura no se puede reducir automáticamente. La altura es la altura de la pantalla del teléfono móvil definida por la altura máxima, por lo que la altura definida por la etiqueta img. no se puede cambiar.

Además, puedes usar jQuery o js nativo para reescribir el CSS en la etiqueta img.

Más tarde, un amigo dijo esto. Código CSS para navegadores móviles (sitios web móviles);

p>

img { max-width: 100; height: auto; width: auto\9; -ancho, si el tamaño de la imagen es mayor que el tamaño actual del navegador, se escalará automáticamente y la altura de la imagen se escalará proporcionalmente. Sin embargo, ie8 tiene un defecto relativamente pobre, es decir, no admite el máximo. atributo de ancho que admiten ie7 e ie9