Хочу сверстать этот макет. При масштабировании фоновое изображение масштабируется не пропорционально. Хочу, как на fl.ru: ссылка, ссылка.
Хотел изучить исходный код fl.ru, но там очень много классов, разобраться очень трудно.
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;
}