So erreichen Sie eine adaptive Bildgröße

Anpassung der Bildgröße

Wir können die Bildanpassung einfach über Bootstrap implementieren:

<img src="..." class="img-responsive" alt="Pic">

Wenn Sie nicht vorhaben, auf Bootstrap zu verweisen, klicken Sie auf Durch reines CSS, wir können die Definition der auf IMG reagierenden Klasse im Bootstrap anzeigen:

.img-responsive {    
    display: inline-block;    
    height: auto;    
    max-width: 100%;}

Auf diese Weise verwenden wir reines CSS, um die Bildanpassung abzuschließen;
Erklären Sie den Code: Anzeige ermöglicht das Das zu seinde Bild wird in einer zurückhaltenden Form dargestellt und die Breite und Höhe können festgelegt werden.
Verwenden Sie dann max-width, um die Breite festzulegen, wodurch die Einstellungen des Breitenattributs der Beschriftung durch andere Klassen überschrieben werden können Passt die Bildhöhe an und kann auch umgekehrt eingestellt werden, aber im Allgemeinen kommt dies häufiger vor.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine adaptive Bildgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!