Lösung für das Problem der Bildgrößenänderung in HTML

Ich habe ein Bild von einer Drittanbieterschnittstelle erhalten. Als ich das Bild in meine Seite einbettete, stellte ich fest, dass das Bild zu groß war. Eine direkte Größenänderung des Div funktioniert nicht, das Bild hat immer noch die gleiche Größe. Gibt es eine Möglichkeit, die Größe der Bildanzeige anzupassen?

Das Bild wird dynamisch abgerufen, was bedeutet, dass beim Aktualisieren der Seite ein neues Bild angezeigt wird. Ein erneutes Zuschneiden des Bildes wird das Problem also nicht lösen.

Der HTML-Quellcode lautet wie folgt

<div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img  src="http://abc.jpeg"></img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img src="http://abc.jpeg"></img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img src="http://abc.jpeg"></img>
                </div>
            </div>
        </div>

Sie können die selbstresponsive Image-Klasse von Bootstrap ausprobieren

<img class="img-responsive" src="http://abc.jpeg" />

Wenn Sie das Problem immer noch nicht lösen können , Sie können nur Folgendes eingeben: Wie oben erwähnt, definiert das Hinzufügen von Breite und Höhe

<img style="width=100px; height=100px" src="http://abc.jpeg" />

und das Schreiben von

 .panel img{ width:你期望的宽; height:你期望的高}

in CSS. Sie sollten nicht die Größe des Div anpassen, sondern die Größe des img-Tags.

Wenn Sie das Bild einer anderen Person erhalten, bedeutet dies, dass die Länge und Breite des Bildes nicht bestätigt sind und die Größe auch unsicher ist. Wenn Sie img verwenden, um die Länge und Breite zu begrenzen, sind Sie dabei Problem.

Am besten passen Sie die Länge und Breite des Panels an, während

.panel img{max-width:100%;max-height:100%;}

Das obige ist der detaillierte Inhalt vonLösung für das Problem der Bildgrößenänderung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!