Изображение, которое было изменено, мерцает на firefox

У меня есть изображение размером около 400 пикселей на 300 пикселей.Изображение, которое было изменено, мерцает на firefox

Я изменении размера его с помощью CSS так:

img { 
    display: block; 
    max-width: 50px; 
    max-height: 50px; 
}

Но когда он показывает, что мерцает постоянно.

Это происходит только в Firefox. Chrome, IE и Safari все отлично отображаются. Почему это?

источник

2014-10-29 proPhet

Вы пробовали использовать ширину и высоту вместо максимальной ширины и максимальной высоты? –

Это потому, что вы изменяете размер большого изображения на очень маленькое пространство. Лучше измените размер изображения через PHP или какой-нибудь инструмент для создания десктопа, например Photoshop – Justinas

Какую версию Firefox вы используете? Попробуйте обновить Firefox до последней версии и снова проверить ... –

Прежде всего, это плохая идея изменить размер изображения. Когда вам нужно изображение размером 50x50, у которого есть изображение 400x300. Вы тратите время на использование пользователей, позволяя ему загружать 30Kb-файл, когда он может сделать это с помощью 4Kb.

Однако вы хотите масштабировать изображение. У CSS3 есть новое свойство, называемое ri.

попробовать этот

img.ri { max-width: 90%; }

Вы можете использовать медиа-запросы наряду с этим.

@media screen and (orientation: portrait) { 
    img.ri { max-width: 90% } 
} 

@media screen and (orientation: landscape) { 
    img.ri { max-height: 90% } 
}

Теперь вы не хотите потерять свои пропорции, поэтому попробуем свойство CSS

resize: none|both|horizontal|vertical|initial|inherit; /* any one of the options IE not supported*/

Посмотрите в это: http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design если вы хотите ответно масштабирования изображения.

источник

2014-10-29 08:29:09 argentum47

Изображение, которое было изменено, мерцает на firefox

ответ

Смежные вопросы