Как сделать изображение в зависимости от размера экрана пользователя?

Question

У меня есть изображение с высотой 480 пикселей. На моем Macbook это выглядит нормально, но когда я иду на свой 30-дюймовый монитор, очевидно, что в нижней части есть огромное пространство.

Что я могу сделать, чтобы убедиться, что 480 пикселей всегда будут иметь отношение к размеру экрана пользователя?

Я сделал несколько поисков, и кажется, что использование background-image: cover или background position Я могу сделать что-то, но, скорее всего, это не то, что я ищу. Что я могу решить эту проблему?

Answer 1

Один из способов достижения этого - разместить изображение в контейнере, который может масштабироваться со страницы.

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

height:40%; 

масштабировать элементы.

Масштаб высоты страницы, здесь, чтобы увидеть для себя: http://jsfiddle.net/L7uWd/

Answer 2

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

Установите image height to some percentage instead of pixel, который автоматически обрабатывает размер экрана.