web-dev-qa-db-de.com

Richten Sie ein Bild in einem Div vertikal mit der Reaktionshöhe aus

Ich habe den folgenden Code, der einen Container erstellt, dessen Höhe sich mit der Breite ändert, wenn die Größe des Browsers geändert wird (um ein quadratisches Seitenverhältnis beizubehalten).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

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

Wie kann ich den IMG im Container vertikal ausrichten? Alle meine Bilder haben variable Höhen und der Container kann keine feste Höhe/Linienhöhe haben, da er anspricht ... Bitte helfen Sie!

130
user1794295

Hier ist eine Technik, um Inline-Elemente innerhalb eines parent horizontal und vertikal gleichzeitig auszurichten:

Vertikale Ausrichtung

1) In diesem Ansatz erstellen wir ein inline-block (Pseudo-) Element als erstes (oder letztes) Kind des parent, und setzen Sie die Eigenschaft height auf 100%, um die gesamte Höhe von parent zu übernehmen.

2) Durch Hinzufügen von vertical-align: middle Bleiben die Inline-Elemente (-block) in der Mitte des Zeilenabstands. Also fügen wir diese CSS-Deklaration zu den beiden first-child und our element (the image) hinzu.

3) Um schließlich das Leerzeichen zwischen inline (-block) - Elementen zu entfernen, können wir setzen die Schriftgröße des Parent um font-size: 0; auf Null.

Hinweis: Im Folgenden habe ich Nicolas Gallaghers Bildersetzungstechnik verwendet.

Was sind die Vorteile?

  • Der Container ( parent) kann dynamische Dimensionen haben.
  • Die Abmessungen des Bildelements müssen nicht explizit angegeben werden.

  • Wir können diesen Ansatz leicht anwenden, um ein <div> - Element vertikal auszurichten ; die einen dynamischen Inhalt haben können (Höhe und/oder Breite). Beachten Sie jedoch, dass Sie die Eigenschaft font-size Von div neu festlegen müssen, um den Innentext anzuzeigen. Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>
.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;        /* <-- reset the font property */
}

Die Ausgabe

Vertically align an element in its container

Reaktionsschneller Container

In diesem Abschnitt wird die Frage nicht beantwortet, da das OP bereits weiß, wie ein reaktionsfähiger Container erstellt wird. Ich werde jedoch erklären, wie es funktioniert.

Damit sich height eines Containerelements mit seinem width ändert (unter Berücksichtigung des Seitenverhältnisses), können wir einen Prozentwert für top/bottom padding Eigenschaft.

A Prozentwert am oberen/unteren Rand oder Rand ist relativ zur Breite des umgebenden Blocks.

Zum Beispiel:

.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   */
}

Hier ist die Online Demo. Kommentieren Sie die Zeilen von unten aus und ändern Sie die Größe des Bedienfelds, um den Effekt zu sehen.

Wir könnten auch die Eigenschaft padding auf ein dummy child oder ein :before/:after - Pseudoelement anwenden, um dasselbe Ergebnis zu erzielen. Beachten Sie jedoch , dass in diesem Fall der prozentuale Wert für padding relativ zu width von ist das .responsive-container selbst.

<div class="responsive-container">
  <div class="dummy"></div>
</div>
.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo # 1.
Demo # 2 (Verwenden von :after - Pseudoelementen)

Inhalt hinzufügen

Verwenden Sie die Eigenschaft padding-topverursacht ein großes Leerzeichen am oberen oder unteren Rand des Inhalts innerhalb des Containers.

Um dies zu beheben, haben wir den Inhalt mit einem Wrapper-Element umbrochen, dieses Element mit absolute Positionierung aus dem normalen Dokumentenfluss entfernt und den Wrapper schließlich erweitert (bu mit top). Eigenschaften right, bottom und left), um den gesamten Platz des übergeordneten Elements ( Container auszufüllen.

Auf geht's:

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

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

Hier ist die Online Demo.


Alles zusammen bekommen

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

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>
.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;
}

Hier ist die WORKING DEMO.

Offensichtlich könnten Sie die Verwendung des Pseudoelements ::before Aus Gründen der Browserkompatibilität vermeiden und ein Element als erstes untergeordnetes Element von .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

AKTUALISIERTE DEMO.

Verwenden von max-* - Eigenschaften

Um das Bild in der Box in einer geringeren Breite zu halten, können Sie die Eigenschaften max-height Und max-width Für das Bild festlegen:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Hier ist die AKTUALISIERTE DEMO.

380
Hashem Qolami

Mit flexbox ist das ganz einfach:

GEIGE

Fügen Sie dem Bildcontainer einfach Folgendes hinzu:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}
46
Danield

Verwenden Sie dieses CSS, da Sie bereits das Markup dafür haben:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Hier ist ein funktionierender JsBin: http://jsbin.com/ihilUnI/1/edit

Diese Lösung funktioniert nur für quadratische Bilder (da ein prozentualer Wert für den oberen Rand von der Breite des Containers und nicht von der Höhe abhängt). Für Bilder in zufälliger Größe können Sie Folgendes tun:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Funktionierende JsBin-Lösung: http://jsbin.com/ihilUnI/2/edit

16
Tibos

Sie können ein Bild sowohl horizontal als auch vertikal zentrieren, indem Sie margin: auto und absolute Positionierung. Ebenfalls:

  1. Es ist möglich, zusätzliches Markup durch Verwendung von Pseudoelementen zu umgehen.
  2. Es ist möglich, den mittleren Teil von GROSSEN Bildern mit negativen Werten für links, oben, rechts und unten anzuzeigen.
.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}
<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>
11
Salman A

Probier diese

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }
4
user2678106

Hier ist eine Technik, mit der Sie JEDEN Inhalt vertikal und horizontal zentrieren können!

Grundsätzlich benötigen Sie nur zwei Container und stellen sicher, dass Ihre Elemente die folgenden Kriterien erfüllen.

Der Außenbehälter:

  • sollte haben display: table;

Der innere Behälter:

  • sollte haben display: table-cell;
  • sollte haben vertical-align: middle;
  • sollte haben text-align: center;

Das Inhaltsfeld:

  • sollte haben display: inline-block;

Wenn Sie diese Technik verwenden, fügen Sie einfach Ihr Bild (zusammen mit allen anderen Inhalten, die Sie dazu verwenden möchten) in das Inhaltsfeld ein.

Demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Siehe auch this Fiddle !

2
John Slegers

Ich bin auf diesen Thread gestoßen, auf der Suche nach einer Lösung, die:

  • verwendet 100% der angegebenen Bildbreite
  • behält das Bildseitenverhältnis bei
  • hält das Bild vertikal zur Mitte ausgerichtet
  • funktioniert in Browsern, die Flex nicht vollständig unterstützen

Beim Testen einiger der oben aufgeführten Lösungen habe ich keine gefunden, die alle diese Kriterien erfüllt. Ich habe daher diese einfache Lösung zusammengestellt, die möglicherweise nützlich ist andere Leute, die dasselbe tun müssen:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}
<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Arbeitsbeispiel für JSFiddle

2
Alexandra

hTML Quelltext

<div class="image-container"> <img src=""/> </div>

cSS-Code

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
0
William

Versuchen

HTML

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}
0
Paramasivan

Mache ein weiteres Div und füge sowohl 'Dummy' als auch 'Img-Container' in das Div ein

Tun Sie HTML und CSS wie folgt

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
<div class="responsive-container">
    <div class="inner-container">
                <div class="dummy">Sample</div>
                <div class="img-container">
                        Image tag
                </div>
        </div>    
</div>

Anstelle von 100% für den 'responsive-container' können Sie die gewünschte Höhe angeben.

0
Discover