Как избежать обрезания изображения выходящего из блока?
Обрезаются облака по бокам. Overflow:visible не помогает. Есть ли этому решение?
HTML
<section class="intro"> <div class="container"> <div class="intro__content-box"> <div class="intro__content"> <h1 class="intro__title"> Track your next fuel shops </h1> <h2 class="intro__subtitle"> Monitor and Alert on all petrol bunks near to you </h2> <p class="intro__text">Signup For <strong>FREE</strong></p> <form class="form__intro" action="#"> <input class="input__intro" type="email" placeholder="Your E-mail Adress"> <button class="intro__btn" type="submit"> SIGNUP </button> </form> </div> </div> </div> </section> <section class="company"> <div class="container"> <div class="company__box"> <img class="company__img" src="images/company-1.png" alt=""> <img class="company__img" src="images/company-2.png" alt=""> <img class="company__img" src="images/company-3.png" alt=""> <img class="company__img" src="images/company-4.png" alt=""> <img class="company__img" src="images/company-5.png" alt=""> </div> </div> </section> |
<section class="intro"> <div class="container"> <div class="intro__content-box"> <div class="intro__content"> <h1 class="intro__title"> Track your next fuel shops </h1> <h2 class="intro__subtitle"> Monitor and Alert on all petrol bunks near to you </h2> <p class="intro__text">Signup For <strong>FREE</strong></p> <form class="form__intro" action="#"> <input class="input__intro" type="email" placeholder="Your E-mail Adress"> <button class="intro__btn" type="submit"> SIGNUP </button> </form> </div> </div> </div> </section> <section class="company"> <div class="container"> <div class="company__box"> <img class="company__img" src="images/company-1.png" alt=""> <img class="company__img" src="images/company-2.png" alt=""> <img class="company__img" src="images/company-3.png" alt=""> <img class="company__img" src="images/company-4.png" alt=""> <img class="company__img" src="images/company-5.png" alt=""> </div> </div> </section>
CSS
.intro { overflow: visible; background-color: #66abdb; } .intro__content-box { height: 942px; display: flex; align-items: center; background-image: url(../images/bg.png); background-repeat: no-repeat; background-position: center; overflow: visible; /* background-repeat: no-repeat; background-position: center center; background-size: 100%; */ } .intro__title { max-width: 490px; font-size: 52px; font-weight: bold; line-height: 72px; text-transform: uppercase; color: #f7f6f2; } .intro__subtitle { margin-top: 10px; font-size: 24px; font-weight: 300; font-style: italic; line-height: 47px; color: #fff; } .intro__text { margin-top: 40px; color: #f7f7f7; } .intro__text strong { background-color: #ffce54; padding: 5px 8px 3px; border-radius: 5px; } .form__intro { margin-top: 20px; } .input__intro { width: 427px; padding: 15px 0; padding-left: 30px; border: 1px solid #fff; border-radius: 5px; } .input__intro::placeholder { font-size: 18px; font-weight: 300; color: #d1d3d5; } .intro__btn { margin-left: 32px; padding: 15px 20px; text-transform: uppercase; background-color: #77c344; color: #fff; border: 1px solid #77c344; border-radius: 5px; cursor: pointer; } |
.intro { overflow: visible; background-color: #66abdb; } .intro__content-box { height: 942px; display: flex; align-items: center; background-image: url(../images/bg.png); background-repeat: no-repeat; background-position: center; overflow: visible; /* background-repeat: no-repeat; background-position: center center; background-size: 100%; */ } .intro__title { max-width: 490px; font-size: 52px; font-weight: bold; line-height: 72px; text-transform: uppercase; color: #f7f6f2; } .intro__subtitle { margin-top: 10px; font-size: 24px; font-weight: 300; font-style: italic; line-height: 47px; color: #fff; } .intro__text { margin-top: 40px; color: #f7f7f7; } .intro__text strong { background-color: #ffce54; padding: 5px 8px 3px; border-radius: 5px; } .form__intro { margin-top: 20px; } .input__intro { width: 427px; padding: 15px 0; padding-left: 30px; border: 1px solid #fff; border-radius: 5px; } .input__intro::placeholder { font-size: 18px; font-weight: 300; color: #d1d3d5; } .intro__btn { margin-left: 32px; padding: 15px 20px; text-transform: uppercase; background-color: #77c344; color: #fff; border: 1px solid #77c344; border-radius: 5px; cursor: pointer; }
Дополнительно:
visible не работает на background. Не может быть такого, что облака обрезаны прямо на изображении?
Может просто поиграться с background-size, задать ему contain.
Можно:
- Увеличить блок, поставить паддинги
- Задать фон родителю
- Сделать псевдо и задать фон ему
еще что-нибудь
Совершенно очевидно, что рисунок (фон) не может быть нарисован за пределами листа бумаги (блока).
я вам простейшую аналогию привел из жизни. Невозможно рисовать за пределами листа бумаги. Невозможно расширить фон элемента за пределы этого элемента. Далее следует простой вывод – нужно расширить сам блок.
Просто поменяйте местами две строки
Было:
<section class="intro"> <div class="container"> <div class="intro__content-box"> |
<section class="intro"> <div class="container"> <div class="intro__content-box">
Станет:
<section class="intro"> <div class="intro__content-box"> <div class="container"> |
<section class="intro"> <div class="intro__content-box"> <div class="container">
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы избежать обрезания изображения, которое выходит за пределы блока, можно использовать CSS свойство `overflow`. Это свойство позволяет управлять тем, как содержимое блока обрабатывается, когда оно не помещается внутри блока.
Существует несколько значений для свойства `overflow`:
1. `visible` (по умолчанию) - содержимое блока будет видимо за пределами блока, если оно выходит за его границы.
2. `hidden` - содержимое, которое выходит за пределы блока, будет скрыто.
3. `scroll` - если содержимое выходит за пределы блока, появится полоса прокрутки, чтобы пользователь мог прокрутить его.
4. `auto` - полоса прокрутки появится только в случае необходимости.
Пример использования:
.block { width: 200px; height: 200px; overflow: hidden; /* или scroll, или auto */ }
Таким образом, вы можете выбрать подходящее значение для свойства `overflow`, чтобы избежать обрезания изображения или другого содержимого, выходящего за пределы блока. Не забудьте также проверить размеры блока и изображения, чтобы они соответствовали вашим требованиям.