Почему картинка выходит за пределы body при уменьшении экрана?
<div class="container"> <div class="background"> <div id="s1"></div> <div id="s2"></div> <div id="gift1"></div> <div id="gift2"></div> </div> <div class="block1"> <h1>Дарим подарки</h1> <h3>за ваши покупки</h3> </div> </div> |
<div class="container"> <div class="background"> <div id="s1"></div> <div id="s2"></div> <div id="gift1"></div> <div id="gift2"></div> </div> <div class="block1"> <h1>Дарим подарки</h1> <h3>за ваши покупки</h3> </div> </div>
.background { pointer-events: none; } #s1 { background: url(img1) 50% 50% no-repeat; position: absolute; left: calc(50% - 950px); top: -150px; width: 1000px; height: 1000px; z-index: 1; } #s2 { background: url(img2) 50% 50% no-repeat; position: absolute; left: calc(50% - 100px); top: 200px; width: 1000px; height: 1000px; z-index: 1; overflow:hidden; } #gift1 { pointer-events: none; background: url(img3); position: absolute; left: calc(50% - 720px); margin-top: -40px; width: 515px; height: 385px; z-index: 2; } #gift2 { pointer-events: none; background: url(img4) 50% 50% no-repeat; position: absolute; left: calc(50% + 20px); top: 450px; width: 650px; height: 475px; z-index: 2; overflow:hidden; } |
.background { pointer-events: none; } #s1 { background: url(img1) 50% 50% no-repeat; position: absolute; left: calc(50% - 950px); top: -150px; width: 1000px; height: 1000px; z-index: 1; } #s2 { background: url(img2) 50% 50% no-repeat; position: absolute; left: calc(50% - 100px); top: 200px; width: 1000px; height: 1000px; z-index: 1; overflow:hidden; } #gift1 { pointer-events: none; background: url(img3); position: absolute; left: calc(50% - 720px); margin-top: -40px; width: 515px; height: 385px; z-index: 2; } #gift2 { pointer-events: none; background: url(img4) 50% 50% no-repeat; position: absolute; left: calc(50% + 20px); top: 450px; width: 650px; height: 475px; z-index: 2; overflow:hidden; }
Дополнительно:
Ответы:
задай родителю overflow: hidden;
- #s2 {
overflow:hidden;
}#gift2 {
overflow:hidden;
}
Прописано, но не работает - TheFlappy, очевидно, что overflow надо задавать для "коробки" в которой вся эта тряхомудия лежит, а не самим картинкам, т.е. для
.background или для .container, при этом, естественно, задав им ширину (100%?).Также рекомендую забыть про overflow: hidden и использовать всегда overflow: clip, коме тех случаев, когда специфическое поведение hidden действительно нужно.
- TheFlappy, какой к чёрту оверфлоф к бакгроунду!!!
Задай пропорции для блока через ratio.
background-size cover или contain. Размер блока по ширине 100%
значит нужно их позиционировать от правого края, а не от левого
вроде такого: right: 30%
- Всё та же проблема
у вас отступ справа откуда взялся?
с версткой что то не то
задайте overflow-x:hidden для body
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда изображение выходит за пределы тела страницы при уменьшении экрана, может быть вызвана несколькими причинами. Вот несколько возможных решений для этой проблемы:
1. **Использование CSS свойства `max-width`**: Установка максимальной ширины изображения с помощью CSS свойства `max-width` поможет предотвратить выход изображения за пределы тела страницы при уменьшении экрана. Например:
img { max-width: 100%; height: auto; }
2. **Использование CSS свойства `overflow`**: Установка значения `overflow: hidden;` для родительского элемента изображения также может помочь скрыть часть изображения, которая выходит за пределы тела страницы. Например:
.container { overflow: hidden; }
3. **Использование медиа-запросов**: Создание адаптивного дизайна с помощью медиа-запросов позволит корректно отображать изображение на различных устройствах и экранах. Например:
@media only screen and (max-width: 600px) { img { max-width: 100%; height: auto; } }
4. **Проверка размеров изображения**: Убедитесь, что размеры изображения соответствуют размерам контейнера, в котором оно размещено. Изображение может выходить за пределы тела страницы из-за неправильных размеров.
5. **Проверка других стилей CSS**: Проверьте другие стили CSS, которые могут влиять на поведение изображения, такие как позиционирование, отступы и т.д. Убедитесь, что они не приводят к выходу изображения за пределы тела страницы.
Следуя этим рекомендациям, вы сможете предотвратить выход изображения за пределы тела страницы при уменьшении экрана и обеспечить корректное отображение на различных устройствах.