Richten Sie ein Bild innerhalb eines Divs vertikal mit der ansprechenden Höhe aus

135

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!

user1794295
quelle
1
Hier ist eine einfache Flexbox-Lösung: stackoverflow.com/a/31977476/3597276
Michael Benjamin

Antworten:

381

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

Richten Sie ein Element in seinem Container vertikal aus

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 .

Hashem Qolami
quelle
1
Hallo Hashem, vielen Dank für Ihre Antwort - dies funktionierte wie ein Zauber für Desktop-Browser, selbst wenn die Größe auf kleinere Breiten geändert wurde. Leider erscheinen die Bilder auf dem Handy (Android v2.3.5) nicht unter dem Container div. Irgendeine Idee für eine Lösung dafür?
user1794295
3
@ user1794295 Ich habe diese Geige auf drei Android-Geräten mit Android v2.3 (Galaxy S II, Galaxy Note, Motorola Droid 4) über browsererstack.com getestet. Alles funktioniert wie erwartet. Das Ergebnis finden Sie hier: browsererstack.com/screenshots /… . Bitte geben Sie einen Screenshot oder einen spezifischen Test Ihres Problems an. Ich werde so gut wie möglich helfen.
Hashem Qolami
1
Hallo, hier sind einige Screenshots: browsererstack.com/screenshots/… - wie Sie bei kleineren Geräten (z. B. Xperia, LG Nexus 4) sehen können, erscheinen die Bilder unter den Containern ... was ist los?!
user1794295
3
@ HashemQolami Dies ist die erstaunlichste CSS-Sache, seit ich angefangen habe, Websites zu erstellen :).
Alexander Solonik
1
Danke für font-size: 0;!
Johannes Liebermann
47

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 */
}
Danield
quelle
2
Diese Lösung funktioniert und ist in meinem Fall viel eleganter. CSS3 Flex ist großartig!
Daniel Bonnell
2
Es funktioniert nicht in Safari :( Ich denke, das Problem ist flex
yennefer
1
@yennefer für Safari verwenden -webkit-Präfix, oder versuchen Sie eine Bibliothek wie prefixfree.js :)
QUB3X
Dies funktioniert nicht, wenn die Höhe des Containers anspricht (in Prozent).
Jenlampton
1
Perfekte Lösung!
Nirus
16

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

Tibos
quelle
Entschuldigung, ich arbeite nicht für mich - dies reduziert nur die Größe der Bilder auf die Hälfte der Breite des Containers.
user1794295
2
Ich sehe nicht, wie das mit dem von mir erwähnten CSS passieren kann. Bitte geben Sie ein funktionierendes Beispiel an, das ich sehen kann, damit ich meine Antwort verbessern kann. PS: Ich habe auch eine andere Lösung bereitgestellt :)
Tibos
11

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>

Salman A.
quelle
Vielen Dank! Ihr .responsive-container img css war der einzige, der für mich funktioniert hat.
Diogo Garcia
4

Probier diese

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

quelle
Entschuldigung, das funktioniert nicht, ich denke, weil meine .img-containerabsolut positioniert ist - dies ist notwendig, um das quadratische Seitenverhältnis / die dynamische Höhe beizubehalten.
user1794295
2

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 !

John Slegers
quelle
2

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

Alexandra
quelle
0

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%;
}
Paramasivan
quelle
0

HTML Quelltext

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

CSS-Code

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
Wilhelm
quelle
Während dieser Code - Schnipsel zu begrüßen ist, und etwas Hilfe bieten kann, würde es erheblich verbessert , wenn es eine Erklärung enthalten von , wie es um die Frage anspricht. Ohne das hat Ihre Antwort einen viel geringeren pädagogischen Wert - denken Sie daran, dass Sie die Frage in Zukunft für die Leser beantworten, nicht nur für die Person, die jetzt fragt! Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, und geben Sie an, welche Einschränkungen und Annahmen gelten.
Toby Speight
0

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.

Entdecken
quelle