Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie eine adaptive Bildgröße

So erreichen Sie eine adaptive Bildgröße

一个新手
一个新手Original
2017-09-20 09:50:253649Durchsuche


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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn