O tamanho de tela adaptável da imagem do miniaplicativo WeChat é realmente eficaz

Recentemente, assumi o desenvolvimento de um pequeno projeto de programa. Durante o desenvolvimento do front-end, encontrei um problema que todos costumavam usar para adaptar a imagem ao tamanho da tela do telefone celular. Este é um problema simples, mas fácil de entender o poço. Veja o
seguinte código:
wmxl code
< view class="imgs" >
< images src="image address" mode="widthFix"
</view>
wxss code.imgs
{ display:flex; width:100%; height :auto; } assim O resultado parece alterar o tamanho de acordo com o tamanho da tela, porque as duas propriedades acima fixaram a largura. A altura é automática, mas o resultado. . . Você compila a alteração N, a imagem ainda é a mesma e o tamanho não muda. A altura também não mudou. Depois de ler muitos artigos, muitas pessoas disseram que o método é muito simples, mas não foram direto ao ponto. Diz-se que um atributo mode="widthFIx" é adicionado para fornecer uma largura fixa. Por exemplo 720rpx, altura automática, para que a imagem mude de acordo com o tamanho da tela do telefone. Atenda aos requisitos da tela adaptável. Agora a questão é, onde adicionar essa largura de tela fixa, em wxss? Não, a altura dessa tela fixa deve ser adicionada <view class="imgs">wmxlcódigona página wxml </view>












wxss
code.imgs{ display:flex; width:100%; height:auto; } O código acima pode efetivamente resolver o problema de adaptação da imagem ao tamanho da tela.




おすすめ

転載: blog.csdn.net/weixin_41863241/article/details/127415196