0

Есть блок с фиксированной высотой и шириной. Задача в том, чтобы поместить в него картинку, которая будет немного выступать сверху, но только если она действительно больше этого блока. Если картинка по высоте меньше этого блока, то она должна прилипнуть к низу, а не к верху. Казалось бы задача может легко решится при помощи position: absolute; bottom: 0;, но тут ещё одна особенность: в ширину картинка также может быть совершенно любого размера и нужно, чтобы она автоматически центрировалась при помощи text-align: center; или margin: auto; и работал width: auto, что невозможно с абсолютным позиционированием.

Вот всё, что у меня сейчас есть: https://jsfiddle.net/dfrj0sn5/1/ Здесь картинка прилипает к верху блока и выступает снизу, нужно наоборот.

Как бы это решить при помощи css?

1 ответ 1

0

Нет ничего проще:

.wrap{
  position: relative;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}

img {
  max-width: 100%;
  max-height: 120%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
10
  • но ведь ничего не изменилось о_О jsfiddle.net/dfrj0sn5/2
    – Diskyp
    2 июл 2017 в 18:52
  • Вы просили позиционирование по центру - получите. Что еще не так? 2 июл 2017 в 19:00
  • тайтл моего вопроса: “Прикрепить” выступающую картинку к низу блока, а не к верху
    – Diskyp
    2 июл 2017 в 19:00
  • вот ещё одна цитата: "Здесь картинка прилипает к верху блока и выступает снизу, нужно наоборот."
    – Diskyp
    2 июл 2017 в 19:01
  • Важно понимать какого блока wrap или main? 2 июл 2017 в 19:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.