HTML / CSS: что я должен использовать, чтобы определить высоту / ширину изображения, чтобы сделать его независимым от разрешения?

Question

Я читал по всему Интернету, что я не должен определять шрифты (или что-либо еще) с абсолютной высотой / шириной / размером пикселя и вместо этого использовать EM ..., чтобы на дисплеях с более высоким разрешениеммой веб-сайт может масштабироваться соответствующим образом.

Однако, что я использую для определения высоты / ширины ИЗОБРАЖЕНИЯ ... потому что изображения не будут хорошо масштабироваться (они выглядят пикселизированными)

ОБНОВЛЕНИЕ:

Чтобы уточнить, я не , ссылаясь на увеличение страницы.Я имею в виду, как сделать независимым разрешение моего веб-приложения, чтобы оно выглядело правильно на дисплеях с более высоким DPI.

Answer 1

Я знаю, что этот вопрос немного устарел, но хочу поставить его там для всех, кто может прийти позже.Говоря о мобильных устройствах с более высокой плотностью пикселей, мобильные браузеры будут увеличивать страницу на величину, чтобы она выглядела так, как будто веб-страница не очень мала.Устройства реализуют это масштабирование в соответствии со спецификацией CSS 2.1 .

Например, сегодня многие устройства имеют коэффициент плотности пикселей 1,5x по сравнению с настольными мониторами.В результате мобильный браузер будет увеличивать сайты примерно на 150%, чтобы компенсировать лишние пиксели.Новый дисплей Retina имеет плотность пикселей в 2 раза ... и, следовательно, браузер увеличивает веб-сайты примерно на 200%.

Дело в том, что разработчикам не нужно беспокоиться о устройствах с различным разрешением.Если вы хотите, чтобы ваши изображения четко отображались на устройствах с высоким разрешением, вам потребуется изображение с более высоким разрешением.Как правило, вам не нужно беспокоиться об устройствах 1.5x, так как разница в качестве незначительна и не стоит затраченных усилий.Тем не менее, новый дисплей сетчатки вызывает некоторые действительно размытые изображения, и в результате вы должны использовать 2x изображение.

Таким образом, для следующего изображения вы хотели бы экспортировать изображение 600x400 пикселей, чтобы оно четко отображалось на новом дисплее сетчатки:

<img src="photo.jpg" style="width:300px; height:200px" />

Answer 2

Размер шрифта должен быть установлен в em (или%), потому что если пользователь изменит размер текста в IE (View> Text Size), текст, заданный в px (или имеющий фиксированный размер где-то в цепочке наследования), не будет быть изменены. (Другие браузеры не имеют проблем с изменением размера текста, установленного в px.) Подробнее об этом см. Как изменить размер текста с помощью ems .

Изображения с размерами px не изменяются при изменении размера текста пользователем; изображения с размерами имеют размер . Так что, если размер изображения должен быть относительно размера текста (редкий случай), тогда используйте em. В противном случае размеры px в порядке.

Для масштабирования страницы (когда браузер делает все больше или меньше), не имеет значения, если размеры (текст или изображение) определены с использованием em или px.

Answer 3

Для устройств Retina вы также можете иметь второе изображение в два раза больше и добавить @ 2x к имени файла ... так что если у вас есть изображение размером 200px x 300px с именем image.jpg, вы просто добавляете другое изображение размером 400px x 600pxи назовите его image@2x.jpg, и устройства Retina отобразят это вместо этого.

Answer 4

На самом деле невозможно сделать страницу независимой от разрешения, когда дело касается изображений.

Вы можете использовать SVG для изображений, потому что векторная графика действительно не зависит от DPI, но это не сработает для фотографий.

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

Это примерная страница, http://www.cssplay.co.uk/menu/em_images она имеет изображения в высоком разрешении, которые имеют размеры в формате ems. В Opera с масштабированием страницы изображения с высоким разрешением сохраняют свою четкость при более высоком уровне масштабирования.

Answer 5

см. Решение этой страницы

http://nickcowie.com/2005/elastic-images/

HTML

<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>

CSS

.widecolumn .imageholder {
width:51.5em;}

.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}

Answer 6

При использовании em при изменении размера текста в IE он становится больше, чем должен при увеличении, и меньше, чем при уменьшении.

Решение, которое работает во всех браузерах, для установки размера шрифта по умолчанию в процентах для элемента body:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

http://w3schools.com/css/css_font.asp

Вы можете найти прекрасный пример стилизации изображения, используя px с исходным кодом здесь: http://w3schools.com/css/css_image_gallery.asp. Изображения отлично масштабируются с увеличением или уменьшением текста.

Answer 7

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