2

Хочу сверстать этот макет. При масштабировании фоновое изображение масштабируется не пропорционально. Хочу, как на fl.ru: ссылка, ссылка.

Хотел изучить исходный код fl.ru, но там очень много классов, разобраться очень трудно.

1 ответ 1

4

1) http://jsfiddle.net/soledar10/yhr5ch2n/

HTML

<div></div>

CSS

*{
    padding: 0; 
    margin: 0;
}

div{
    width: 100%;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;
    height: 445px;
}

2) http://jsfiddle.net/soledar10/1qmgehaa/

HTML

<div>
    <img src="https://st.fl.ru/images/landing/bg2.jpg" alt="" />
</div>

CSS

*{
    padding: 0;
    margin: 0;
}

img{
    max-width: 100%;
}

div{
    position: relative;
}
div img{
    position: absolute; top: 0; left: 0;    
}

3) http://jsfiddle.net/soledar10/mxw0Lmbj/

HTML

<div>    
    <figure></figure>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}

div{
    width: 100%;
}
div figure{
    padding-top: 36.56%;  /* 702px/1920px = 0.3656 */
    display: block;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;  
}

Ваш ответ

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

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