Бикубическая интерполяция изображения с передискретизацией
У меня есть изображение заголовка логотипа на моем веб-сайте шириной 900px, которое помещается в контейнер, который уменьшает его до размера в строке заголовка; причина в том, что изображение, созданное для размещения в строке заголовка, выглядело ужасно на мобильных устройствах с высоким разрешением.
Я обнаружил, что мое изображение выглядит абсолютно нормально в Chrome, но в IE10 оно выглядит просто шокирующим. Посмотреть на себя; www.cmvisual.com
Я попытался использовать би-кубический код -ms-interpolation-mode:, чтобы попытаться устранить проблему, но, похоже, он не работает (быстрый взгляд на веб-сайт ms говорит, что он устарел?).
Вот мой код:
<html>
<head>
<title>Chris MacDonald Visualisation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<style>
img.highqual { -ms-interpolation-mode:bicubic; }
img.nearestn { -ms-interpolation-mode:nearest-neighbour; }
</style>
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top" Role = "Navigation">
<div class = "container">
<div class = "navbar-inside pull-left">
<a href = "index.html">
<img class = "logo1" src = "img/motif.png" class = "highqual">
</a>
</div>
Я что-то упустил, и есть ли у кого-нибудь какие-либо предложения относительно того, что делать, чтобы исправить это? Возможно, я рассмотрел возможность включения тегов для отображения разных версий изображения на разных устройствах, но это кажется трудоемким и чем-то вроде дешевого обходного пути?
Заранее большое спасибо всем, кто нашел время, чтобы помочь.
1 ответ
У меня также есть некоторые проблемы с понижением дискретизации изображений в IE10, и, как вы отметили, этот собственный стиль CSS больше не поддерживается в IE10 (более того, начиная с IE9). Есть некоторые связанные с js исправления, подобные этой, но для вашего конкретного случая я бы рекомендовал использовать логотип svg (если вам не нужна поддержка IE8) вместо png. Вы можете найти хорошую информацию об этом здесь.