неправильное масштабирование картинки

Alex_ · №1

Сайт резиновый
в стилях я прописал .header img{max-width: 75vw;} - высоту должен рассчитать сам броузер

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

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

Пробовал через background-size в мозиле растягивает на всю длину

Как от мозилы добиться чтобы при изменении высоты пропорционально изменялась ширина,
а при изменении ширины пропорционально изменялась высота как в Хроме?

gyra · №2

Alex_
Похоже это из-за display: flex; Попробуйте обернуть изображение в div, т.е сделать так:

Выделить код

Код:

<div><img src="images/header.png" alt=""></div>

Alex_ · №3

gyra пишет

Alex_
Похоже это из-за display: flex; Попробуйте обернуть изображение в div, т.е сделать так:
Выделить код
Код:
<div><img src="images/header.png" alt=""></div>

Он у меня в диве header и лежит.
Нашел решение через background: url() и background-size
Получается шапка чуть уже, да хрен с ним, но как в эталонном броузере Chrome.
Завтра переделаю.
Я не пойму, что разработчики Мозилы не знают об этой фигне, что криво масштабируются картинки?

Отредактировано Alex_ (06-06-2016 17:15:14)

gyra · №4

Alex_
То что header лежит в div лежит я вижу и на него повешено display: flex; оберните еще отдельно img и увидите разницу.

Alex_ · №5

gyra спасибо помогло
Правда глюк на мониторах с большим разрешением 1920px и более.
на мониторе 1920Px тестировал:
В Хроме длина шапки при max-width: 75vw; равна 1280px
а Mozilla этого не понимает чересчур растягивает до 1440px
Что-нибудь придумаю

Akwest · №6

У меня тоже на сайте не правильно отображает картинку - на странице поста вставил картинку <img src=" " width="275px" height="175px" alt=" " /> а она отображается примерно покселей 100 на 50

Полезная информация

№106-06-2016 10:13:35