x
 
Артём Зайцев
25 октября 2012

Здравствуйте!

Прошу совета по вёрстке.
Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива?
Свойство text-align для дива срабатывает, только если картинка меньше дива.



Если такое выпирание картинки действительно уместно (о чём нужно справиться у дизайнера), в ЦСС для картинки пропишем смещение вправо на 50 % ширины родительского элемента:

.picture img {
  margin: 0 0 0 50%;
  position: relative;
}

А уже в разметке сдвинем картинку влево на половину собственной ширины, для этого и нужно правило position:relative:

<div class="picture">
  <img src="1.jpg" width="200" height="200"
            style="left: -100px;">
</div>
<div class="picture">
  <img src="2.jpg" width="300" height="200"
            style="left: -150px;">
</div>
<div class="picture">
  <img src="3.jpg" width="400" height="200"
            style="left: -200px;">
</div>

Пусть вас не смущают инлайн-стили — в данном контексте они уместны и даже незаменимы. Посчитать это смещение при выводе шаблона, зная ширину изображения, не составит труда.


Другой способ решения проблемы — запретить картинке быть больше блока, прописав:

.picture img {
  max-width: 100%;
  height: auto;
}

Все ухищрения со смещениями в таком случае не нужны — для выравнивания по центру хватит text-align:center у блока .picture.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Дмитрий Вислов
25 октября 2012

Можно и наоборот: left:50%, a рассчитывать margin-left отрицательный.
Но марджин с минусом — не очень правильно, поэтому ваш вариант лучше, да.

А вариант замены картинки как таковой на фоновое изображение блока здесь уместно предлагать?

Артём Сапегин
25 октября 2012

А ещё можно использовать background-size:cover, — тогда изображение полностью заполнит контейнер, но может быть обрезано. (Не работает в ИЕ8 и более ранних.)

Саша Сушко
25 октября 2012

Дмитрий Вислов, чем «марджин с минусом» не правилен? Просветите, пожалуйста.

Виталий Кузнецов
17 декабря 2013

Чтобы изображение не было видно за пределами блока, родителю надо указать overflow:hidden;


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 2 Расскажите о клише и устойчивых выражениях 13 Поделитесь соображениями, как работать, путешествуя 8