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

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

Использование 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 . Изображения идеально масштабируются с увеличением или уменьшением текста.

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

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

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

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

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;}

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

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

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

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