HTML 5 image adaptive screen img código de dimensionamento proporcional para página da web HTML XNUMX

Devido à expansão da Internet móvel,Wechat marketingA popularidade dos telefones celulares tornou-seVidaferramenta indispensável.

construir um sitemodelo, é recomendável usarWordPressTema adaptável para:

O que significa adaptável à imagem CSS?

Adaptativo de imagem CSS significa fazer as imagens na página web html, através de código CSS:

Próximo,Chen WeiliangVou compartilhar com vocês o código de escala proporcional img CSS ^_^

Código adaptativo de altura e largura da imagem CSS

Inserir imagem em html:

Se você quiser que a imagem se adapte ao tamanho pequeno da tela em vez de ficar fixa em largura e altura.

Você pode adicionar o seguinte código ao arquivo style.css do seu tema WordPress ▼

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

declaração aquimax-widthregra de largura máxima

• para garantir que todas as imagens sejam exibidas no máximo 100% (ou seja, elas só podem ser exibidas no tamanho de suas próprias imagens).
• Neste ponto, se o elemento que contém a imagem (por exemplo, o corpo ou div que contém a imagem) for menor que a largura inerente da imagem, a imagem será dimensionada para preencher o espaço máximo disponível.

width:auto;significa largura automática

\9 É uma maneira de escrever hack css.

• Desta forma, "\9" é adicionado ao código css normal, apenas o navegador IE pode reconhecê-lo, outros navegadores ignorarão esta instrução.
• Isso alcançará a diferenciação do navegador, permitindo a finalidade de navegadores compatíveis.

Por que não usar largura: 100%?

Para obter o dimensionamento automático de imagens, você também pode usar as propriedades de largura mais usadas, por exemplo.width：100％.

No entanto, esta regra não se aplica aqui.

• Porque esta regra fará com que pareça tão largo quanto seu contêiner.
• Nos casos em que o contêiner for muito mais largo que a imagem, a imagem será esticada desnecessariamente.

注意 事项

O que são seletores CSS? Qual é a diferença entre classe e id?Os seguintes tutoriais falam sobre ▼

Qual é a diferença entre classe seletora CSS e id? id e uso de classe em HTML

Qual é a diferença entre classe seletora CSS e id? O uso de id e class em HTML Chen Weiliang está atualmente realizando SEO e otimizando o tema WordPress do site.Embora eu tenha aprendido alguns conhecimentos básicos de HTML e CSS antes, mas não opero há algum tempo, especialmente a parte de CSS...

Como o site móvel reproduz vídeo MP4 adaptável à página?Clique no link abaixo ▼

Como o MP5 da página da Web H4 se adapta à página? O site móvel reproduz o código html do vídeo

O marketing de vídeo é parte integrante do marketing on-line: muitos profissionais de promoção on-line costumam usar o vídeo combinado com o "marketing viral" para direcionar o tráfego.Se o marketing do WeChat for combinado com o marketing de vídeo, poderá melhorar ainda mais a taxa de conversão de direitos autorais de novas mídias e comércio eletrônico social.Eu tenho muitos amigos...