Вертикально центрируйте изображение жидкости в контейнере для жидкости

Я, конечно же, не хочу добавлять в кучу вертикальных выравниваний вопросы CSS, но я потратил часы, пытаясь найти решение, но пока не помогло. Вот ситуация:Вертикально центрируйте изображение жидкости в контейнере для жидкости

Я создаю галерею слайд-шоу изображений. Я хочу, чтобы изображения отображались так сильно, как позволяет окно пользователя. Таким образом, у меня есть этот внешний заполнитель:

<section class="photo full">

(Да, я использую элементы HTML5). Который имеет следующий CSS:

section.photo.full { 
    display:inline-block; 
    width:100%; 
    height:100%; 
    position:absolute; 
    overflow:hidden; 
    text-align:center; 
}

Далее изображение помещается внутри него. В зависимости от ориентации изображения, я установить ширину или высоту до 75%, а другая ось авто:

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?> 
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>

Таким образом, мы имеем жидкости наружный контейнер, с внутренним изображением для текучей среды. Горизонтальное центрирование изображения работает, но я не могу найти способ вертикально центрировать изображение внутри его контейнера. Я исследовал методы центрирования, но большинство предполагает, что контейнер или изображение имеют известную ширину или высоту. Тогда есть дисплей: метод table-cell, который, похоже, тоже не работает для меня.

Я застрял. Я ищу решение для CSS, но я также открыт для js-решений.

источник

2011-02-05 Ferdy

@Ferdy Является СЕКЦИЯ элемент непосредственным потомком ТЕЛА? –

@Ferdy Также отправьте образец полученного HTML-кода для элемента IMG. –

@Sime: Да. Настоящая демо-страница temp: http://ferdy.dnsalias.com/apps/jungledragon/html/tag/92/slideshow/recent/10 – Ferdy

Это работает отлично:

section.photo.full { 
    display: table; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    text-align: center; 
} 

section.photo.full a { 
    outline: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 

section.photo.full img { 
    margin-top: 0; 
}

Я предполагаю, что таблица отображения -cell не работал для вас, потому что это родительский контейнер не отображался в виде таблицы.

Вот демо в jsfiddle:

http://jsfiddle.net/duopixel/5wzPS/

источник

2011-02-06 00:00:12 Duopixel

Ты, мужчина! Это действительно работает. Еще одна проблема с IE8, показывающая изображение только на 1 пиксель, но это еще один вызов. – Ferdy

Кстати, я замечаю два побочных эффекта: исправление: 1. Похоже, что href имеет ширину всего окна вместо 75%.Вы можете видеть это, нависая рядом с изображением, курсор укажет на указатель. 2. При многократном увеличении окна появляется вертикальная полоса прокрутки. Кажется, переполнение: скрытые перестали работать :( – Ferdy

, если вы готовы применить дополнительный div, ваша проблема может исчезнуть: section.photo.full> extradiv> a> img, а затем применить table-cell к extradiv – Duopixel

Может быть, это работает для вас (div является ДИВ обернуты вокруг изображения):

div { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

Running example.

источник

2011-02-05 23:32:22 anroesti

OP сказал, что контейнер является текучей средой –

Действительно, родительский контейнер также является жидкостью. – Ferdy

Давайте пропустить все таблицы нонсенс! :)

<div> 
    <img src="https://placehold.it/1000x1000"> 
</div> 

div { 
    position: relative; 
} 

img { 
    position: absolute; 
    width: 70%; 
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%,-50%,0); 
}

Пример: https://jsfiddle.net/te29m9fv/1/

источник

2016-04-06 21:40:58

Вертикально центрируйте изображение жидкости в контейнере для жидкости

ответ

Смежные вопросы