0

Нужно чтобы изображение адаптивно увеличивалось или уменьшалось в зависимости от размера экрана устройства, а блок quote перемещался относительно размеров изображения. Я уже очень долго ломаю голову над этим, возможно я что-то не так делаю, можете подсказать что не так. Вот еще ссылка на github: https://plupiks.github.io/Webovio-Full-Landing/

.features-block3 {
  padding-bottom: 165px;
}

.features-block3__wrapper {
  display: flex;
  align-items: center;
}

.features-block3__left {
  position: relative;
}

.features-block3__image {
  position: relative;
  flex: 0 0 50%;
  width: 735px;
  min-height: 550px;
  overflow: hidden;
}

.features-block3__image img {
  position: absolute;
  z-index: 1;
  max-width: 100%;
  min-height: 550px;
  object-fit: cover;
}

.fetures-block3__quote {
  position: absolute;
  top: 372px;
  left: 323px;
  z-index: 10;
  width: 453px;
  min-height: 243px;
  background: #ffffff;
  box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
  border-radius: 8px;
}

.quote__wrapper {
  padding: 30px;
}

.quote__text {
  font-style: italic;
  font-size: 16px;
  line-height: 26px;
  color: #4d533c;
  margin-bottom: 24px;
}

.quote__img {
  width: 46px;
  height: 46px;
  background-image: url("../img/quote/quote-img1.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
  margin-right: 14px;
}

.quote__about {
  display: flex;
  align-items: center;
}

.quote__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #4d533c;
}

.quote__descr {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: #152934;
}

.features-block3__container {
  margin-left: 96px;
}

.features-block3__right-wrapper {
  margin-left: auto;
  max-width: 420px;
}

.features-block3__text {
  margin-bottom: 90px;
}

.features-block3__text p:first-child {
  margin-bottom: 30px;
}

.features-block3__descr {
  color: rgba(33, 56, 66, 0.6);
}
<div class="features-block3">
  <div class="features-block3__wrapper">
    <div class="features-block3__left">
      <div class="features-block3__image">
        <img src="img/features-block3-bg.png" alt="">
      </div>
      <div class="fetures-block3__quote quote">
        <div class="quote__wrapper">
          <p class="quote__text">
            “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
          </p>
          <div class="quote__about">
            <div class="quote__img"></div>
            <div class="quote__about-inf">
              <h3 class="quote__title">Angel Armstrong</h3>
              <span class="quote__descr">Founder & CEO, Google</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container features-block3__container">
      <div class="features-block3__right">
        <div class="features-block3__right-wrapper">
          <div class="title__wrapper">
            <h2 class="title features-block3__title">
              The wall new Balenciaga.com
            </h2>
          </div>
          <div class="features-block3__text">
            <p class="decr features-block3__descr">
              This article is floated online with an aim to help you find the best dvd printing solution.
            </p>
            <p class="decr features-block3__descr">
              Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.
            </p>
          </div>
          <a href="#" class="link">
            <svg class="triangle-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="150 0 192 512">
                        <path fill="curentColor"
                          d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z">
                        </path>
                      </svg>
            <span>See Case Study</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

4
  • не вижу что не так работает.
    – Alexandr
    3 ноя 2021 в 9:52
  • изображение должно занимать 50% от размеров страницы, и по мере ёе уменьшения менять размеры. А сейчас картинка фиксированая им не занимает 50%
    – Vitaliy
    3 ноя 2021 в 10:02
  • Почитайте про vw и vh
    – De.Minov
    3 ноя 2021 в 10:09
  • Почти помогло, только блок quote не сдвигеться в зависимости от размеров изображения
    – Vitaliy
    3 ноя 2021 в 10:14

1 ответ 1

0

Если мы говорим о этом изображении:

введите сюда описание изображения

то поменяйте эти стили:

.features-block3__left {
    position: relative;
    width: 50%; /*а тут добавьте*/
}
.features-block3__image {
    position: relative;
    flex: 0 0 50%;
    /*width: 735px; закоментируйте эту строку*/ 
    min-height: 550px;
    overflow: hidden;
}

.fetures-block3__quote {
position: absolute;
top: 372px;
left: 40%; /*для смещения цитаты относительно размера контейнера изображения в процентах*/
z-index: 10;
width: 453px;
min-height: 243px;
background: #ffffff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
}
3
  • незнаю как точно обьяснить, блок который позиционирован относительно изображения, у него стоит left: 322px. Когда размер страницы стоновиться меньше хочу чтобы параметр left также пропорционально уменьшался. Сейчас же при уменьшении размеров экрана, этот блок остается на месте чего не должно быть. Есть поможете буду очень признателен. И спасибо что помогли с изображением теперь оно занимает 50% страницы)
    – Vitaliy
    3 ноя 2021 в 10:37
  • @Vitaliy добавил в ответ
    – Alexandr
    3 ноя 2021 в 10:50
  • спасибо за помощь)
    – Vitaliy
    3 ноя 2021 в 11:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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