Проблемма с header в Mozilla

[Alex_]

На картинке видно что Chrome все красиво, а Mozilla исказила картинку, растянув ее высоту.

Из-за этого съехало меню вверх, т.к. оно привязано в высоте header.

в стилях я прописал  .header img{max-width: 75vw;

Chrome после того как растягивает картинку для хидера правильно масштабирует ее по высоте, а Mozilla после растягивания высоту масштабирует некорректно.

Если сделать  .header img{width: 75vw;  то все красиво в обоих, в полноэкранном просмотре хидер через чур растянут, мне не нравится

Пробовал подсовывать префикс для  Mozilla -moz-max-width: 75vw;

она это не скушала.

Как победить?

ссылка на сайт http://nakhodka.h1n.ru/ 

зацените заодно

 

 

[SelenIT]

Как вариант — object-fit: contain; object-position: top center.

[Alex_]

тут https://webref.ru/layout/html5-css3/img/scale пишут  свойство object-fit не поддерживается в IE.Кто нибудь пробовал в IE?

[Igor Schnaider]

Через фон и background-size попробуйте сделать.

[kattiperk]

.header {
  height: 120px;
}
.header img {
  height: 100%;
}

Вообще картинка 150px по высоте. В хроме 120 почему-то.

Edited June 1, 2016 by kattiperk

[Alex_]

18 часов назад, Igor Schnaider сказал:

Через фон и background-size попробуйте сделать.

Очередной глюк обнаружил для:

background-image  и   background

Если путь к картинке

background:url(http://nakhodka.h1n.ru/images/header1.png)   --  фоновое изображение вижу на локальном компе

background:url(/images/header1.png)  --  фоновое изображение не вижу на локальном компьютере(как будто ее нет)

Хотя в редакторе Brackets в предосмотре изображение есть.

т.е. если не запулить файл в интернет то и не увидишь что сотворил.

Или я что-то не так делаю?

[Igor Schnaider]

Это путь к файлу относительный текущей директории. То есть, если у вас, например, стили лежат в папке ./css, а картинка в ./images, то нужно прописывать ../images/[filename]