Как сделать адаптивный background-image для мобильного сайта?

Question

[drtvader]

Помогите пожалуйста решить вопрос с изображением в бэкграунде. Так вот оно получается растянутым по вертикали, и на мобильных устройствах выглядит не круто. Выставление % в height не дает того результата, тогда текст сползает. Что в коде поменять?

Код по ссылке ниже: jsfiddle.net/ezpesLsx

Comments

[Serj-One]

Вы хотя бы код, перед тем как выкладывать, отформатируйте. Такое ощущение, что кучу на газоне навалили.

Answer 1

[Дима Паутов]

А где там картинка то? чет в вашем коде ее нет!

1) Сделайте её фоном и дайте свойство background-size!
2) Сделайте её фоном и на нужном экране меняйте фоновую картинку.

Comments

[drtvader]

<img class="htimg" src="images/partners/1.jpg" />

.headermSlider .htimg {
	 display: block;
    width: 100%;
max-height:500px;
    min-height: 200px;
}

[Дима Паутов]

drtvader: что это?

Answer 2

[sergski]

.htslide {
background: url('images/partners/1.jpg') 50% 0 no-repeat;
background-size: cover;
/*background-size: contain;*/
}