Автоматическое изменение размера изображения в зависимости от размеров окна браузера

Question

У меня есть базовый макет веб-страницы с шириной заголовка 100% и липким нижним колонтитулом. Между ними у меня есть большой рисунок.

Я бы хотел, чтобы размер графики изменялся динамически в зависимости от размера окна.

Я предпочитаю не использовать flash, и мне было интересно, есть ли простой способ сделать это с помощью jquery / javascript.

Я не очень разбираюсь в jquery / javascript, поэтому мне было интересно, как подойти к этому, есть компонент, который уже делает это.

Answer 1

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

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

ширина оболочки = 960px, деленная на ширину экрана = 1640px

Если вы хотите, чтобы весь сайт был отзывчивым, вы должны выполнить все вычисленияпуть вниз.разделите ребенка на его родителя.Надеюсь, это поможет!

Answer 2

Установите ширину контейнеров изображения в процентах, как в width:{amount}%;, затем также установите ширину изображения в процентах. Таким образом, ваш контейнер изображений расширяется по мере того, как ваше изображение также расширяется, или, по крайней мере, это будет выглядеть так, потому что изображение фактически расширяется при расширении контейнера. Вам необязательно устанавливать ширину изображения на 100%, но все, что вы установили, будет относительным к ширине контейнера.

Answer 3

Если вы хотите положиться на CSS3 и отобразить свое изображение в качестве фона в элементе, рассмотрите возможность использования background-size. Пройдя по этому маршруту, вы можете изменить размер изображения, сохранив соотношение сторон.

Вот краткий пример размера фона.

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

Answer 4

img.thespecialimage {
  min-height : 100%;
  min-width : 100%;
  max-height : 100%;
  max-width : 100%;
}