So legen Sie IMG-Stilattribute mithilfe von CSS fest

Im Webdesign ist das img-Element ein sehr häufiges Element, das zum Einfügen von Bildern verwendet wird. Wenn Sie Position, Größe, Abstand, Ausrichtung und andere Attribute des Bildes steuern möchten, können Sie das img-Element mit CSS festlegen. Im Folgenden stellen wir vor, wie Sie die CSS-Eigenschaften des img-Elements festlegen.

1. Legen Sie die Bildgröße fest:

1. Stellen Sie die Breite und Höhe des Bildes über die Breiten- und Höhenattribute von CSS ein, zum Beispiel:

img{
    width: 500px;
    height: 300px;
}

Nach dem Login kopieren

bis max -width- und max-height-Attributeinstellungen

2. Wenn Sie möchten, dass sich die Größe des Bildes entsprechend der Breite des Containers adaptiv ändert und dabei das Seitenverhältnis beibehalten wird, können Sie die max-width- und max-height-Attribute verwenden, zum Beispiel:

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

Nach dem Login kopieren

Horizontale zentrierte Ausrichtung

1. Um das Bild horizontal in der Mitte auszurichten, können Sie das Anzeigeattribut des img-Elements auf „Blockieren“ setzen und den Rand verwenden Attribut, um den linken und rechten Rand auf „Automatisch“ zu setzen, zum Beispiel:

img{
    display: block;
    margin: 0 auto;
}

Nach dem Login kopieren

Vertikale Mittelausrichtung

2. Um das Bild vertikal in der Mitte auszurichten, können Sie das Flexbox-Layout oder das Positionsattribut verwenden, um es festzulegen. Am Beispiel des Flexbox-Layouts können Sie das Attribut display:flex auf den Container festlegen und das Attribut align-items verwenden, um die vertikale Ausrichtung in der Mitte festzulegen, zum Beispiel:

.container{
    display: flex;
    align-items: center;
}
img{
    margin: 0 auto;
}

Nach dem Login kopieren

img{
    margin: 10px;
    padding: 5px;
}

img{
    border-radius: 50%;
}

<div class="container">
    <img src="example.jpg">
</div>

.container{
    background-color: #f2f2f2;
    padding: 10px;
}

Das obige ist der detaillierte Inhalt vonSo legen Sie IMG-Stilattribute mithilfe von CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!