Wie zentriere ich ein Bild innerhalb eines übergeordneten Divs und behalte dabei Höhe und Seitenverhältnis bei?

Bildelement innerhalb des übergeordneten Div zentrieren

Das Zentrieren eines Bildes innerhalb seines übergeordneten Div erfordert spezielle CSS-Techniken. So erreichen Sie dies:

Problem:

So richten Sie ein Bild in der Mitte seines übergeordneten Div aus und behalten dabei seine Höhe (100 %) bei, ohne seine Breite zu strecken ?

Beispiel:

Berücksichtigen Sie das in der Frage bereitgestellte HTML und CSS:

<code class="html"><div class="box">
  <img src='featured.jpg' />
</div></code>

<code class="css">.box {
  height: 100%;
  width: 450px;
  border: 2px solid red;
  background: green;
  overflow: hidden;
}
.box img {
  height: 100%;
  width: auto;
  text-align: center;
}</code>

Lösung:

Um das Bild zu zentrieren, fügen Sie text-align: center; CSS-Deklaration für das übergeordnete Div anstelle des untergeordneten Bildelements:

<code class="css">.box {
  /* ... */
  text-align: center;  /* Align center all inline elements */
}</code>

Dies zentriert alle Inline-Elemente innerhalb des Div, einschließlich des Bildes.

Zusätzliche Verbesserung:

Aufgrund der reservierten Zeilenhöhe für Inline-Elemente kann es zu einer Lücke unter dem Bild kommen. Um diese Lücke zu schließen, fügen Sie Vertical-Align: Bottom; zum Bild CSS:

<code class="css">.box img {
  /* ... */
  vertical-align: bottom;  /* Fix the vertical gap */
}</code>

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Bild innerhalb eines übergeordneten Divs und behalte dabei Höhe und Seitenverhältnis bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!