1

У меня есть изображение: corenr

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

footer-img-block {
overflow-x: hidden;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
max-width: 1041px;
height: 331px;
}
.footer-image {
background: url(/wp-content/themes/toster/images/palette.png) no-repeat;
height: 331px;
max-width: 1041px;
width: 100%;
z-index: 17;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
left: calc(100% - 500px);
position: absolute;
bottom: 0;

}

Но при уменьшении разрешения, появляется горизонтальный скролл. Как можно разместить картинку так, чтобы скролл не появлялся и задняя часть изображения пряталась за пределами?

8
  • 2
    Изображение чем-то обёрнуто? Если да, то поможет overflow:hidden для блока, который регулирует ширину. Если нет - то это надо обрезать глобальные теги, вроде html или body, но это может привести к большим проблемам при использовании скриптов.
    – vordzer
    30 авг 2017 в 6:51
  • @vordzer, добавил к body overflow-x: hidden, скролл ушел, но я не рискну относить такое решение к адаптивным.
    – Webdev96
    30 авг 2017 в 6:59
  • адаптивность в принципе подразумевает наличие всего контента в просматриваемой области. Если есть желание скрывать часть изображения - что-то должно его прятать. Это может быть обёртка самого изображения или обёртка более глобальная. Как альтернатива - использование изображения в качестве фонового, для него такое поведение естественно. Но также потребуется введение блока, для позиционирования фонового изображения.
    – vordzer
    30 авг 2017 в 7:35
  • Чтобы разобраться в чем проблема, добавьте в ваш вопрос минимальный воспроизводимый пример
    – Cheg
    30 авг 2017 в 7:57
  • @vordzer, как альтернатива использование фонового изображения - может ли это подразумевать отказ от ovefllow:hidden ? потому что на самом деле, не хотелось бы его применять.
    – Webdev96
    30 авг 2017 в 15:30

0

Ваш ответ

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

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