HTML img tag и meta viewport

В настоящее время я работаю над отзывчивым веб-сайтом, используя meta тег viewport. Я столкнулся с проблемой, при которой изображения, загруженные с использованием тега img, теряют качество. Но если я использую background-image, они загрузятся отлично.HTML img tag и meta viewport

Я хочу использовать тег img из-за ключевых слов SEO. Есть ли способ предотвратить его потерять качество?

EDIT: показывает разметку

внутри головы:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

внутри тела:

<img src='images/logo.png' style='width:65px;height:65px;' />

в logo.png размеры являются 65x65 пикселей

источник

2013-08-07 Christopher Francisco

Как так, потерять качество? Можете ли вы скриншот разницы? –

Это похоже на то, что изображения на мобильных устройствах выглядят немного неровными, как если бы они были масштабированы, но я на самом деле устанавливаю ширину и высоту в css, точную ширину и высоту изображения. Например, если изображение составляет 65 х 65, CSS говорит о ширине: 65 пикселей, высота: 65 пикселей –

, пожалуйста, покажите разметку – meda

Похоже, ваши <img> s являются получать масштабирование. Это, вероятно, контролируется правило CSS где-то, что может иметь один или несколько из следующих свойств заявил:

img { 
    width: 100%; 
    min-width: 100%; 
    max-width: 100%; 
}

Если это так, то просто удалите эти заявления собственности, или вы могли бы убить муху с РПГ и попробуйте:

img { width: auto !important; }

Однако такой подход может в конечном итоге вызывает вас больше горя в долгосрочной перспективе, и его следует избегать, если это возможно.

источник

2013-08-07 16:34:55

ответ

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