Как сделать неизменную высоту изображения при масштабировании?

Question

[qbk17]

Есть div со след стилями:

background-image: url(images/main-page-header.png);
	width: 100%;
	height: 485px;
	-webkit-background-size: cover;
	background-size: cover;
	background-color: rgba (0, 0, 0, .6);
	color: #fff;
	padding-top: 25px;
	margin-bottom: 50px;

Мне нужно, чтобы при изменении ширины экрана изображение не меняло свою высоту. Скриншоты имеются

Comments

[Андрей Токмаков]

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

[qbk17]

Андрей Токмаков: Вопрос поставлен правильно и оно меняет свою высоту, прошу пожалуйста попсмотреть внимательней на скриншоты

[Ankhena]

qbk17: Используйте background-size в px.

[qbk17]

Ankhena W: но мне нужно, чтобы ширина была 100%) Или я чего то не понимаю?

[qbk17]

Ankhena W: можно сделать так, чтобы оно урезалось по ширине, но по высоте оставалось всегда в фиксированном значении?

[Ankhena]

qbk17:

Или я чего то не понимаю?

Похоже на то.

Вам надо, чтобы ширина была 100%, а высота 485 точек, так?
Так и пишите background-size: 100% 485px
С пропорциями, естественно, будет беда.

[qbk17]

Ankhena W: а можно сделать так, чтобы оно тогда просто урезалось, а не масштабировалось по величине:

[Ankhena]

qbk17: да, просто ничего не пишите в background-size, изображение будет обрезано по размеру блока.

Answer 1

[Stalker_RED]

background-size: auto 485px;
или background-size: 100% auto;
или даже background-size: cover
Я так и не понял чего вы хотите.

Answer 2

[qbk17]

Всем спасибо большое, я очень сильно затупил. Просто убрал свойство background-size