Bildverarbeitung im WeChat-Applet (zentriert, Vollbild)

Bildanzeige ist ein notwendiger Schritt beim Entwerfen von Miniprogrammen. Ich sehe, dass der Online-Unterricht begrenzt ist, und jetzt habe ich die Probleme gelöst, die während meines eigenen Entwurfsprozesses aufgetreten sind, wodurch die Probleme, auf die Sie stoßen, gelöst werden können.

Verwenden Sie den vollständigen Code am Ende und befolgen Sie meine Schritte, um ihn zu debuggen. Wenn nicht, kontaktieren Sie mich bitte.

Geben Sie zuerst den Code und die verwendeten Renderings an:

Geben Sie zuerst das Programm home.wxml an:

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>

1 Zentrieren Sie das Bild (oben auf dem Bildschirm):

//.wxss里的参数
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

Die oben eingestellte Bildgröße dient nur dazu, den tatsächlichen Effekt besser sehen zu können.

2. Das Bild ist zentriert (in der Mitte ist die Position einstellbar → Höhe und Ausrichtungselemente)

.imagesize{
 display:flex;
 height: 600px;                    //flex布局高度
 justify-content: center;        
 align-items:center;                //垂直居中
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

Der Höhenwert des obigen Bildes beträgt: 200px 400px 600px

Die ersten beiden gelten nicht für alle Mobiltelefonmodelle, da die Bildschirmgröße von Mobiltelefonen nicht festgelegt ist.

Es ist jedoch sehr hilfreich für die Gestaltung der Bildposition.

3. Das Bild ist zentriert (Mitte des Bildschirms)

Code:

page{
   height:100%                        //满屏设置
}
.imagesize{
 display:flex;
 height: 100%;                        //设置布局满屏
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

Sehen Sie den Effekt:

4. Geben Sie den vollständigen Code an (der vorherige Artikel enthält auch den vollständigen Code, fügen Sie ihn einfach dem vorherigen Ordner hinzu):

home.wxml

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>

home.wxss

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

5. Den Bildschirm füllen:

Um den Bildschirm allein zu füllen, wird hauptsächlich mode= verwendet . 'widthFix'

Das spezifische Programmsegment, das hinzugefügt wurde, ist .wxml:

<image src="/images/img21.jpg" class=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>

und die Änderung in .wxss:

page{
height:100%
}
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}

Ein Bild wurde zur Demonstration geändert:

Sehen Sie sich das Rendering ohne Breite an. Fix:

Es ist also immer noch sehr nützlich.

Da es sich um ein Fenster mit der unteren Registerkarte handelt, wird nicht das Vollbild angezeigt.

Sie können den Startbildschirm natürlich auch mit der richtigen Proportion gestalten. Es gibt auch einen Unterschied zwischen der Hintergrundfarbe und der Bildfarbe, auf die Sie achten müssen beim Debuggen.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonBildverarbeitung im WeChat-Applet (zentriert, Vollbild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!