Wie kann ich ein Bild innerhalb eines responsiven Containers vertikal ausrichten?

Vertikales Ausrichten eines Bildes innerhalb eines Responsive Containers

Die Herausforderung

Sie haben eine HTML-Struktur mit einem Container, der ein quadratisches Seitenverhältnis beibehält Die Größe des Browserfensters wird geändert. In diesem Container möchten Sie ein Bild hinzufügen, müssen jedoch sicherstellen, dass es vertikal ausgerichtet bleibt. Die Herausforderung entsteht, weil die Bilder in der Höhe variabel sind und die Höhe des Containers nicht festgelegt werden kann.

Lösung

Verwendung von CSS-Inline-Elementen

1. Erstellen Sie ein Inline-Block-Pseudoelement als erstes (oder letztes) untergeordnetes Element des Containerelements und legen Sie seine Höhe auf 100 % fest, um den gesamten Container einzunehmen Höhe.
2. Setzen Sie „vertikal-align: middle“ sowohl für das Pseudoelement als auch für das Bild ein, um die Elemente vertikal zu zentrieren.
3. Entfernen Sie alle Leerräume zwischen den Elementen, indem Sie „font-size: 0“ festlegen. auf dem Containerelement, um den von den Zeichen eingenommenen Platz (Leerzeichen) zu entfernen.

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <h3 id="Erstellung-des-Containers-Responsiv">Erstellung des Containers Responsiv</h3><p>Um einen responsiven Container zu erstellen, bei dem sich die Höhe im Verhältnis zur Breite ändert, können Sie Prozentwerte für verwenden Top/Bottom-Padding-Eigenschaft:</p><pre class="brush:php;toolbar:false">.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Umschließen des Bildinhalts

Um übermäßigen Platz oben oder unten im Container zu vermeiden, wickeln Sie das Bild in ein Wrapper-Element ein und positionieren Sie es absolut darin Der Container soll seinen gesamten Raum ausfüllen:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Einschließlich des Bildes und des CSS für Ausrichtung

HTML:

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

CSS für Bildausrichtung:

.img-container {
  text-align: center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Alternative für Browserkompatibilität

Für eine bessere Kompatibilität zwischen Browsern können Sie Folgendes tun Verwenden Sie anstelle des ein div-Element als erstes untergeordnetes Element des Bildcontainers Pseudoelement:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS:

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

Verwendung von max-*-Eigenschaften für die Bildsteuerung

Um das Bild beizubehalten Wenn die Breite innerhalb des Containers kleiner ist, können Sie die Eigenschaften „max-height“ und „max-width“ für das Bild verwenden:

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}