2

Подскажите пожалуйста, как разместить эти три картинки таким же образом, да еще и адаптивно ( уменшить их размер что-ли? ) День бьюсь и никак не пойму. Текст в них как я понял реализуется через спан, но это еще пол беды. Вот собственно хедер страницы Состоит из 3 частей, красный блок, синий блок высотой до начала экрана и картинка слева.

.header__left__blue {
        position: fixed;
        border-radius: 10px;
        padding-top: 12px;
    }

    .header__left__red {
        position: relative;
    }
<div class="container">
 <div class="row">
     <div class="col-lg-6">
         <div class="header__blue">
         <img src="headerBlue.png" alt="spendcashback" class="img-responsive header__left__blue justify-content-lg-start">
                 <span></span>
         </div>
         <div class="header__red">
         <img src="headerRed.png" alt="cashback" class="header__left__red justify-content-lg-start">
                <span></span>
         </div>
     </div>
     <div class="col-lg-6">
        <img src="headerVelo.png" alt="velotrack" class="header__right justify-content-lg-end">
     </div>
 </div>
</div>

на выходе получается - введите сюда описание изображения

Для более подробного понимания картинок слева - введите сюда описание изображения

Буду невообразимо благодарен!

3

1 ответ 1

0

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

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

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

<style>
.site {
width: 990px;
margin: 0 auto;
}
.shapka {
    width: 990px;
    height: 329px;
    border-radius: 11px;
    /* background-color: #005aab; */
    position: relative;
    overflow: hidden;
    margin-top: 23px;
}
.rs {
    width: 659px;
    height: 329px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: url(https://i.stack.imgur.com/esdCM.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.ls {
    width: auto;
    height: 329px;
    position: relative;
    display: inline-block;
}
.imgred {
    width: 573px;
    height: 221px;
    background-color: #e3000c;
    background: url(https://i.stack.imgur.com/wyrgV.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}
.imgblue {
    width: 539px;
    height: 317px;
    background-color: #005aab;
    background: url(https://i.stack.imgur.com/DVenb.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
}
</style>
<div class="site">
<div class="shapka">
<div class="ls">
<div class="imgred"></div>
<div class="imgblue"></div>
</div>
<div class="rs"></div>
</div>
</div>

3
  • Адаптивно не могу.. image.
    – De.Minov
    17 мар 2019 в 12:53
  • @ CbIPoK2513 Тут нет адаптации. Чтобы её сделать, нужно придумать вначале конструкцию для адаптации такую, чтобы было удобно читать/смотреть. Хочешь, сделай. 17 мар 2019 в 12:56
  • решение от vladimira rodicheva помогло, но, почему картинки прикрепляются через bck ground url, а не через img?
    – Слава
    17 мар 2019 в 19:28

Ваш ответ

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

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