Artigo Diretório
Com o desenvolvimento acelerado da internet móvel e o uso generalizado do marketing no WeChat , os telefones celulares se tornaram uma ferramenta essencial na vida .
Para modelos de sites, recomendamos o uso de temas responsivos do WordPress :
- Se o desenvolvedor do tema WordPress não fez a tela adaptável da imagem HTML 5 bem ao projetar a página do tema WordPress...
- Ao navegar no site em um dispositivo móvel, haverá um desalinhamento de imagem muito feio e a experiência do usuário é extremamente ruim!
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:
- Adapte-se automaticamente à largura e altura de diferentes dispositivos.
- A tag img é automaticamente dimensionada proporcionalmente.
Em seguida, Chen Weiliang compartilhará com vocês o código CSS para redimensionar proporcionalmente o tamanho de uma imagem. ^_^
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 ▼
Como o site móvel reproduz vídeo MP4 adaptável à página?Clique no link abaixo ▼
Esperamos que o artigo "Código HTML 5 para redimensionamento de imagens, adaptando-as ao tamanho da tela e à proporção em páginas da web", compartilhado no blog de Chen Weiliang ( https://www.chenweiliang.com/ ), seja útil para você.
Sinta-se à vontade para compartilhar o link deste artigo: https://www.chenweiliang.com/cwl-964.html