@larisa_ptk

Как исправить проблему с размером контейнера?

https://codepen.io/N1crO/project/editor/DBBQYk

Размер контейнера на 7px больше чем картинка. Для этого контейнера задается псевдоэлемент, который должен покрывать картинку полупрозрачным фоном. Но так как он задан от контейнера, то фон вылазит на 7px. У картинки параметры max-width: 100%, height: auto, контейнер должен тянуться на 50% страницы.

Я думаю нужно как-то подогнать контейнер под размер картинки, но он не должен быть фиксированным.

<div class="services__item">
            <img src="img/services3.jpg" alt="Preparatory work">
            <div class="services__overlay">
                <h3 class="services__item-title">Preparatory work</h3>
            </div>
</div>

.services__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 10px;
    margin-bottom: 50px;
}

.services__item {
  width: 50%;
  position: relative;
}

.services__item img {
  max-width: 100%;
  height: auto;
}
.services__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.6);
}

5aa1223133861106211237.png
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
Размер контейнера на 7px больше чем картинка

это services__item ?
если да то уберите width но укажите display:inline-block
либо для img укажите width100%:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
от 10 000 до 15 000 руб.