Функция для jquery или CSS для динамического изменения размера изображения и текста по ширине и / или высоте браузера и поддержания соотношения сторон?

Question

Я хочу, чтобы размер div динамически изменялся по ширине и / или высоте браузера и поддерживал соотношение сторон. Если возможно, также сделайте так, чтобы текст внутри div делал то же самое. Все было бы замечательно!

Answer 1

Что-то вроде того, что вы ищете?

.staticSize {
  border: 3px solid black;
  min-height: 400px;
  height: 400px;
  min-width: 400px;
  width: 400px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.staticSize * {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div class="staticSize">
    <h1>
    A heading
    </h1>
    <img src="http://writingexercises.co.uk/images2/randomimage/boat.jpg" width=350/>
    <label>A description of above. Wow, such description. Very descriptive. More text.
    More text. More text. More text. More text. More text. More text. More text. 
    More text. More text. More text. More text. More text. More text. More text. </label>
</div>

Используя min-witdth, min-height, height и width, вы можете в некотором роде заставить контент оставаться того же размера - однако текст внутри все равно будет зависеть функция масштабирования, управляемая браузером.

См. JSFiddle , чтобы вы могли просматривать изображение.