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

Question

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

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

скажите, пожалуйста, как сделать это лучше с помощью CSS .. я также хорошо с JS или JQuery

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

это один имеет больше возможностей -> эм известково http://riddle.pl/emcalc/