HTML 5 imaxe de pantalla adaptativa img código de escala proporcional para páxina web HTML XNUMX

Debido ao auge da Internet móbil,Marketing de WechatA popularidade dos teléfonos móbiles fíxoseA vidaferramenta imprescindible.

Construír unha estaciónmodelo, recoméndase o seu usoWordPressTema adaptativo para:

Que significa CSS image Adaptive?

A autoadaptación de imaxes CSS refírese a facer as imaxes na páxina web html, a través do código CSS:

A continuación,Chen WeiliangCompartirei contigo o código de escala proporcional img CSS ^_^

Código adaptativo de altura e ancho da imaxe CSS

Inserir imaxe en html:

Se queres que a imaxe se adapte ao pequeno tamaño da pantalla en lugar de permanecer fixa en ancho e alto.

Podes engadir o seguinte código ao ficheiro style.css do teu tema de WordPress ▼

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

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

• para garantir que todas as imaxes se amosan ao 100 % como máximo (é dicir, só se poden mostrar tan grandes como as súas propias imaxes).
• Neste punto, se o elemento que contén a imaxe (por exemplo, o corpo ou o div que contén a imaxe) é menor que o ancho inherente da imaxe, a imaxe escalarase para cubrir o máximo espazo dispoñible.

width:auto;significa ancho automático

\9 É unha forma de escribir hack css.

• Deste xeito, engádese "\9" ao código css normal, só o navegador IE pode recoñecelo, outros navegadores ignorarán esta afirmación.
• Isto conseguirá a diferenciación do navegador, habilitando o propósito dos navegadores compatibles.

Por que non usar o ancho: 100%?

Para conseguir a escala automática das imaxes, tamén pode usar as propiedades de ancho máis usadas, p.width：100％.

Non obstante, esta regra non se aplica aquí.

• Porque esta regra fará que pareza tan ancho como o seu recipiente.
• Nos casos en que o recipiente sexa moito máis ancho que a imaxe, a imaxe estirarase innecesariamente.

注意 事项

Que son os selectores CSS? Cal é a diferenza entre class e id?Os seguintes tutoriais falan de ▼

Cal é a diferenza entre a clase de selector CSS e a identificación? uso de id e clase en HTML

Cal é a diferenza entre a clase de selector CSS e a identificación? O uso de id e clase en HTML Chen Weiliang está realizando actualmente SEO e optimizando o tema de WordPress do sitio web.Aínda que aprendín algúns coñecementos básicos de HTML e CSS antes, pero hai tempo que non o manexo, especialmente a parte de CSS...

Como adaptar a páxina para reproducir vídeos MP4 no sitio web móbil?Fai clic na seguinte ligazón ▼

Como se adapta a páxina web H5 MP4 á páxina? O sitio web para móbiles reproduce código HTML de vídeo

O marketing de vídeo é unha parte integrante do marketing en liña: moitos profesionais da promoción en liña adoitan usar o vídeo combinado con "márketing viral" para xerar tráfico.Se o marketing de WeChat se combina co marketing de vídeo, pode mellorar aínda máis a taxa de conversión de redacción dos novos medios e do comercio electrónico social.Teño moitos amigos...