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
    Загрузи код с картинками, чтобы они в нём работали. 16 мар 2019 в 21:16
  • codepen.io/topicstarter/pen/PLeBeG - чуть чуть доработать, шрифты 17 мар 2019 в 6:05
  • Какой смысл в закрашенной левой части?
    – De.Minov
    17 мар 2019 в 12:54

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 that you have read and understand our privacy policy and code of conduct.

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