Wyrównaj w pionie obraz wewnątrz div z wysokością czułości
Mam następujący kod, który ustawia kontener, który ma wysokość, która zmienia się wraz z szerokością, gdy przeglądarka jest zmieniana (aby zachować kwadratowy współczynnik proporcji).
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;
}
Jak mogę ustawić IMG w pionie wewnątrz kontenera? Wszystkie moje obrazy mają zmienną wysokość, a kontener nie może mieć stałej wysokości/wysokości linii, ponieważ reaguje... Proszę o pomoc!
10 answers
Jest to metoda pozwalająca na wyrównanie elementów inline wewnątrz rodzica , poziomo i pionowo w tym samym czasie:
Wyrównanie Pionowe
1) w tym podejściu tworzymy inline-block
(pseudo-)element jako pierwszy (lub ostatni) potomek rodzica i ustawiamy jego właściwość height
na 100%
, aby przyjąć całą wysokość jego rodzica.
2) ponadto, dodanie vertical-align: middle
utrzymuje elementy inline (- block) na środku linii miejsce. Tak więc, dodajemy tę deklarację CSS do first-child i naszego elementu ( obraz).
3) na koniec, aby usunąć znak spacji pomiędzy elementami inline(-block) , możemy ustawić rozmiar czcionki rodzica NA zero przezfont-size: 0;
.
Uwaga: użyłem Nicolasa Gallaghera technika wymiany obrazu poniżej.
Jakie są korzyści?
- kontener (rodzic) może mieć wymiary dynamiczne.
Nie ma potrzeby jawnego określania wymiarów elementu obrazu.
Możemy łatwo użyć tego podejścia, aby wyrównać
<div>
element pionowo ; który może mieć dynamiczną zawartość (wysokość i/lub szerokość). Pamiętaj jednak, że musisz ponownie ustawić właściwośćfont-size
div
, aby wyświetlić tekst wewnątrz. 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 */
}
Wyjście
Responsive Container
Ta sekcja nie odpowie na pytanie, ponieważ OP już wie, jak stworzyć responsywny kontener. Jednak wyjaśnię, jak to działa.
Aby Wysokość elementu kontenera zmieniała się wraz z jego szerokość (Z uwzględnieniem proporcji), możemy użyć wartości procentowej dla góry/dołu padding
własność.
wartość procentowa na górnej/dolnej powierzchni lub marginesach jest względem szerokości bloku zawierającego.
Na przykład:
.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 */
}
Oto Demo Online. Komentuj linie od dołu i zmień rozmiar panelu, aby zobaczyć efekt.
Również możemy zastosować właściwość padding
do atrapy dziecka lub :before
/:after
pseudo-element, aby osiągnąć ten sam wynik. Ale zauważ że w w tym przypadku wartość procentowa padding
jest względem szerokości samego .responsive-container
.
<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 (użycie :after
pseudoelementu)
Dodawanie treści
Użycie właściwości padding-top
powoduje powstanie ogromnej przestrzeni u góry lub u dołu zawartości, wewnątrz kontenera .
Aby to naprawić, zawijamy zawartość za pomocą elementu wrapper, usuwamy element z dokumentu normalny przepływ za pomocą absolutne pozycjonowanie, a na koniec rozwiń wrapper (bu za pomocą top
, right
, bottom
i left
właściwości), aby wypełnić całą przestrzeń swojego rodzica, kontenera .
Zaczynamy:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Oto Demo Online.
Getting all together
<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;
}
Oto demo robocze.
Oczywiście, można uniknąć używania W tym celu należy utworzyć element, który będzie pierwszym potomkiem .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%;
}
Użycie max-*
właściwości
Aby zachować obrazek wewnątrz pudełka w mniejszej szerokości, możesz ustawić max-height
i max-width
właściwość na obrazku:
.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 */
}
Oto zaktualizowane DEMO.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:22
Z flexbox jest to łatwe:
Wystarczy dodać do kontenera obrazka:
.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 */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-18 12:59:23
Użyj tego css, ponieważ masz już dla niego znaczniki:
.img-container {
position: absolute;
top: 50%;
left: 50%;
}
.img-container > img {
margin-top:-50%;
margin-left:-50%;
}
Oto działający JsBin: http://jsbin.com/ihilUnI/1/edit
To rozwiązanie działa tylko dla obrazów kwadratowych (ponieważ procentowa wartość margin-top zależy od szerokości kontenera, a nie wysokości). W przypadku obrazów o losowym rozmiarze można wykonać następujące czynności:
.img-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add browser-prefixes */
}
Działające rozwiązanie JsBin: http://jsbin.com/ihilUnI/2/edit
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-30 15:14:50
Możesz wyśrodkować obraz, zarówno w poziomie, jak i w pionie, używając margin: auto
i pozycjonowania absolutnego. Także:
- możliwe jest usunięcie dodatkowych znaczników za pomocą pseudo elementów.
- możliwe jest wyświetlenie środkowej części dużych obrazów za pomocą ujemnych wartości lewej, górnej, prawej i dolnej.
.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 <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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-23 13:12:08
Spróbuj tego
.responsive-container{
display:table;
}
.img-container{
display:table-cell;
vertical-align: middle;
}
Natknąłem się na ten wątek w poszukiwaniu rozwiązania, które:
- używa 100% szerokości danego obrazu
- zachowuje proporcje obrazu
- utrzymuje obraz w pionie do środka
- działa w przeglądarkach, które nie w pełni obsługują flex
Testowanie niektóre z rozwiązań zamieszczonych powyżej nie znalazłem jednego spełniającego wszystkie te kryteria, więc złożyłem ten prosty, który może być przydatny dla innych osób potrzebujących to samo:
.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>
Przykład pracy na JSFiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-03 10:07:58
Try
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%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-29 17:26:24
Oto technika, która pozwala wyśrodkować dowolną zawartość zarówno w pionie, jak i w poziomie!
Zasadniczo potrzebujesz tylko dwóch kontenerów i upewnij się, że twoje elementy spełniają następujące kryteria.
Pojemnik zewnętrzny:
- powinien mieć
display: table;
Wewnętrzny pojemnik:
- powinien mieć
display: table-cell;
- powinien mieć
vertical-align: middle;
- powinien mieć
text-align: center;
Pole zawartości:
- powinien mieć
display: inline-block;
Jeśli używasz tej techniki, po prostu dodaj swój obraz (wraz z innymi treściami, które chcesz z nim zrobić)do pola zawartość.
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>
[[7]}Zobacz this Fiddle!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-21 02:24:54
Kod Html
<div class="image-container">
<img src=""/>
</div>
Kod Css
img
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-04 21:59:23
Zrób kolejny div I dodaj zarówno "dummy", jak i "IMG-container" wewnątrz div
Do HTML i CSS jak następuje
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>
Zamiast 100% dla 'responsive-container' możesz podać żądaną wysokość.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-03 18:29:14