HTML 5 imagen pantalla adaptable img código de escala proporcional para página web HTML XNUMX

Debido al auge de Internet móvil,WeChat MarketingLa popularidad de los teléfonos móviles se ha vuelto生活herramienta imprescindible.

construir un sitio webplantilla, se recomienda utilizarWordPressTema adaptativo para:

¿Qué significa CSS adaptable a imágenes?

La autoadaptación de imágenes CSS se refiere a hacer las imágenes en la página web html, a través del código CSS:

Próximo,chen weiliangCompartiré con ustedes el código de escalado proporcional CSS img ^_^

Código adaptativo de alto y ancho de imagen CSS

Insertar imagen en html:

Si quieres que la imagen se adapte al pequeño tamaño de la pantalla en lugar de quedarse fijo en ancho y alto.

Puede agregar el siguiente código al archivo style.css de su tema de WordPress ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

declaración aquímax-widthregla de ancho máximo

• para garantizar que todas las imágenes se muestren al 100 % como máximo (es decir, solo se pueden mostrar tan grandes como sus propias imágenes).
• En este punto, si el elemento que contiene la imagen (por ejemplo, el cuerpo o div que contiene la imagen) es más pequeño que el ancho inherente de la imagen, la imagen se escalará para llenar el espacio máximo disponible.

width:auto;significa ancho automático

\9 Es una forma de escribir hack css.

• De esta manera, se agrega "\9" al código css normal, solo el navegador IE puede reconocerlo, otros navegadores ignorarán esta declaración.
• Esto logrará la diferenciación del navegador, habilitando el propósito de navegadores compatibles.

¿Por qué no usar ancho: 100%?

Para lograr el escalado automático de imágenes, también puede usar las propiedades de ancho más utilizadas, p.width：100％.

Sin embargo, esta regla no se aplica aquí.

• Porque esta regla hará que parezca tan ancho como su contenedor.
• En los casos en que el contenedor sea mucho más ancho que la imagen, la imagen se estirará innecesariamente.

注意 事项

¿Qué son los selectores de CSS? ¿Cuál es la diferencia entre clase e id?Los siguientes tutoriales hablan de ▼

¿Cuál es la diferencia entre la clase de selector CSS y la identificación? id y uso de clase en HTML

¿Cuál es la diferencia entre la clase de selector CSS y la identificación? El uso de id y class en HTML Chen Weiliang actualmente está realizando SEO y optimizando el tema de WordPress del sitio web.Aunque he aprendido algunos conocimientos básicos de HTML y CSS antes, pero no lo he operado por un tiempo, especialmente la parte de CSS...

¿Cómo reproduce el sitio web móvil video MP4 adaptable a la página?Haga clic en el enlace a continuación ▼

¿Cómo se adapta la página web H5 MP4 a la página? El sitio web móvil reproduce código html de video

El video marketing es una parte integral del marketing en línea: muchos profesionales de la promoción en línea a menudo usan videos combinados con "marketing viral" para impulsar el tráfico.Si el marketing de WeChat se combina con el marketing de video, puede mejorar aún más la tasa de conversión de redacción de nuevos medios y el comercio electrónico social.Tengo muchos amigos...