Ich habe den folgenden Code, der einen Container mit einer Höhe einrichtet, die sich mit der Breite ändert, wenn der Browser die Größe ändert (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 reagiert ... Bitte helfen Sie!

Hier ist eine Technik zum gleichzeitigen horizontalen und vertikalen Ausrichten von Inline-Elementen innerhalb eines übergeordneten Elements :

Vertikale Ausrichtung

1) Bei diesem Ansatz erstellen wir ein inline-block(Pseudo-) Element als erstes (oder letztes) Kind des Elternteils und setzen seine heightEigenschaft so, dass 100%es die gesamte Höhe seines Elternteils annimmt .

2) Beim Hinzufügen vertical-align: middlebleiben die Inline-Elemente (-block) in der Mitte des Zeilenbereichs. Also fügen wir diese CSS-Deklaration sowohl dem ersten Kind als auch unserem Element (dem Bild ) hinzu.

3) Um das Leerzeichen zwischen Inline- Elementen (-block) zu entfernen , können Sie die Schriftgröße des übergeordneten Elements auf Null setzen font-size: 0;.

Hinweis: Ich habe im Folgenden die Bildersetzungstechnik von Nicolas Gallagher verwendet .

Was sind die Vorteile?

• Der Container ( übergeordnet ) kann dynamische Dimensionen haben.

• Die Abmessungen des Bildelements müssen nicht explizit angegeben werden.

• Mit diesem Ansatz können wir ein <div>Element auch vertikal ausrichten . die einen dynamischen Inhalt haben können (Höhe und / oder Breite). Beachten Sie jedoch, dass Sie die font-sizeEigenschaft von neu festlegen müssen div, 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

Responsive 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.

Um die Höhe eines Containerelements mit seiner Breite zu ändern (unter Berücksichtigung des Seitenverhältnisses), können wir einen Prozentwert für die paddingEigenschaft top / bottom verwenden .

Ein Prozentwert für die obere / untere Polsterung oder die Ränder ist relativ zur Breite des enthaltenen 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 Linien von unten aus und ändern Sie die Größe des Bedienfelds, um den Effekt zu sehen.

Wir könnten die paddingEigenschaft auch auf ein Dummy- Kind oder :before/ :afterPseudo-Element anwenden , um das gleiche Ergebnis zu erzielen. Aber zur Kenntnis , dass in diesem Fall auf den Prozentwert paddingist auf die relative Breite der .responsive-containerselbst.

<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 :afterPseudoelementen)

Hinzufügen des Inhalts

Die Verwendung von padding-topEigenschaften führt zu einem großen Platz am oberen oder unteren Rand des Inhalts im Container .

Um dies zu beheben, haben wir den Inhalt von einem Hüllenelement wickeln, das Element aus dem Dokument normalen Fluss entfernen durch Verwendung absolute Positionierung , und erweitert schließlich die Umhüllung (bu verwenden top, right, bottomund leftEigenschaften) , um den gesamten Raum der Mutter zu füllen, der Behälter .

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 ARBEITSDEMO .

Natürlich können Sie die Verwendung von ::beforePseudoelementen aus Gründen der Browserkompatibilität vermeiden und ein Element als erstes untergeordnetes Element erstellen 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 .

Mit max-*Eigenschaften

Um das Bild in der Box in geringerer Breite zu halten, können Sie Folgendes für das Bild festlegen max-heightund festlegen max-width:

.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 .

Mit der 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 */
}

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 Rand-Spitzenwert von der Breite des Containers und nicht von der Höhe abhängt). Für Bilder mit 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

Sie können ein Bild sowohl horizontal als auch vertikal mithilfe der margin: autoabsoluten Positionierung zentrieren. Ebenfalls:

1. Es ist möglich, zusätzliches Markup durch Verwendung von Pseudoelementen zu vermeiden.
2. Es ist möglich, den mittleren Teil von GROSSEN Bildern anzuzeigen, indem negative Werte für links, oben, rechts und unten verwendet werden.

.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>

Probier diese

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

Hier ist eine Technik, mit der Sie JEDEN Inhalt sowohl vertikal als auch 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) zum Inhaltsfeld hinzu.

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 diese Geige !

Ich bin auf diesen Thread gestoßen, als ich nach einer Lösung gesucht habe, die:

• verwendet 100% der Breite des angegebenen Bildes
• 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 genannten Lösungen habe ich keine gefunden, die alle diese Kriterien erfüllt. Deshalb habe ich diese einfache zusammengestellt, die für andere Personen nützlich sein könnte, 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

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%;
}

HTML Quelltext

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

CSS-Code

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

Machen Sie ein weiteres Div und fügen Sie sowohl 'Dummy' als auch 'Img-Container' in das Div ein

Führen Sie HTML und CSS wie folgt aus

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.