установить размер изображения относительно разрешения экрана

Question

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

например: мое изображение имеет 350 пикселей по ширине и 130 пикселей по высоте. Я хочу, чтобы это был размер при разрешении экрана 1280х768 ... и должен изменяться пропорционально размеру экрана

Скажите, пожалуйста, как это сделать, желательно с помощью CSS .. У меня тоже все хорошо с js или jquery

Спасибо заранее Радж

Answer 1

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

В вашем примере вы должны указать width: 27% (1280/350). Обратите внимание, что родитель должен иметь ширину 100%.

Answer 2

Этан Маркотт написал хорошую статью о решетках для жидкости, http://www.alistapart.com/articles/fluidgrids/

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

этот прочитал меня -> веб утка http://inteldesigner.com/web-duck/about.php

у этого есть больше возможностей -> em calc http://riddle.pl/emcalc/

Answer 3

Вы можете получить размер экрана из DOM, используя screen.width и screen.height. Затем вы можете написать JS-файл для загрузки или замены на желаемое изображение или настроить атрибуты height / width на изображении (которые бы масштабировали его, но не всегда выглядели великолепно).