Выровняйте по вертикали разные размеры img в разных размерах div, где img больше, чем div - PullRequest
Новая
       10

Выровняйте по вертикали разные размеры img в разных размерах div, где img больше, чем div

0 голосов
/ 20 июля 2011

Я пытаюсь выровнять изображения внутри div по вертикали ... не проблема.

Моя проблема возникает с этими условиями.

  1. Изображения будут неопределенными и разных размеров.
  2. Изображения больше чем div и должны быть замаскированы div.
  3. Сайт, который использует это, построен по шаблону 320 и выше, вызывая медиа-запросы для рендеринга страница для экранов разных размеров и, следовательно, содержащие элементы div различаются в зависимости от размера экрана.
  4. При просмотре на смартфонах / планшетах содержащийся div изменит размер при включении устройства (без обновления страницы) - изображение должно оставаться в центре.

Я не могу использовать display:table-cell, потому что изображения больше, чем у div, поэтому с этой опцией высота div и overflow:hidden не работают.

Я попробовал jQuery vAlign, который прекрасно работает ... если вы не меняете размер экрана (например, поворачиваете устройство). Поскольку он вызывается на (document).ready, страница нуждается в обновлении для обновления выравнивания изображений.

Есть ли способ вызвать vAlign через медиа-запрос? Если нет, то есть хак / исправление для метода ячейки таблицы, которое позволит меньшему div маскировать большее img с помощью overfolw:hidden?

UPDATE: Поигрался с чистым CSS ( рабочий пример здесь ), но все еще не могу заставить его работать: (

1 Ответ

0 голосов
/ 20 июля 2011

Я не уверен, что вы имели в виду, но если я правильно понял, используя следующую структуру 

<div class="vertical">
    <div class="wrapper"><img src="image.jpg"></div>
</div>

и следующий CSS 

div.vertical { display:table-cell } 
div.wrapper { display:block;position:relative;overflow:hidden; }
div.wrapper img { position:absolute; }

Вы должны быть в состоянии маскировать (как в кадрировании?) Изображение и иметь возможность выравнивать их по вертикали. Обратите внимание, что класс div.vertical - это просто фиктивный элемент div, показывающий, какой из элементов div будет в данный момент выровнен по вертикали, и вы должны заменить только содержимое этого элемента div в своем приложении.

...