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

Question

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

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

ОБНОВЛЕНИЕ:

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

Answer 1

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

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

Дело в том, что разработчикам не нужно беспокоиться о разном разрешении устройств. Если вы хотите, чтобы ваши изображения четко отображались на устройствах с высоким разрешением, вам потребуется изображение с более высоким разрешением. Обычно вам не нужно беспокоиться об устройствах в 1,5 раза, поскольку разница в качестве незначительна и не стоит усилий. Тем не менее, новый дисплей сетчатки вызывает некоторые действительно размытые изображения, и в результате вы должны использовать 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

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

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

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