Картинка или видео по размеру экрана на CSS

• Изображение по размеру экрана
• Минимальная ширина для элементов, следующих после float, в резиновых шаблонах
• Фон по размеру экрана
• Видео по ширине окна браузера
• Сохранение пропорций блока div при изменении размера окна
• Изменить размеры YouTube по щелчку мышки
• max-width внутри table устанавливается несколько иначе
• Резиновый сайт
• Как отрегулировать размещение элементов HTML в зависимости от разрешения монитора
• Несколько видео Ютуб

Изображение по размеру экрана

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

<img src="izo.jpg" style="max-width: 100%; height: auto;"/>

Минимальная ширина для элементов, следующих после float, в резиновых шаблонах

Сравните (автор)

<img src="izo.jpg" style="float: left; margin: 0 10px; max-width: 100%; height: auto;"/> <p>текст далее

<style>
  .min-p:before { 
    content: "";
    width: 13em;
    display: block;
    overflow: hidden;
    height: 0;
  }
</style>

<img  src="izo.jpg" style="float: left; margin: 0 10px; max-width: 100%; height: auto;"/> <p class="min-p">текст далее</p>

Фон по размеру экрана

С помощью свойства CSS background-size задаётся размер фонового рисунка для элемента HTML, в моём случае это textarea, а значит вы сможете изменить его габариты самостоятельно, потянув за треугольник в Mozille, Google Chrome и Safari. Проценты рассчитываются относительно занимаемого блока; contain, cover и auto сохраняют пропорции фото.

---

▼ по ширине по высоте по меньшей стороне по большей стороне всё пространство в единицах

textarea {
  display: block;
  background: #fff5d7 url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s1600/parovozik.jpg) no-repeat;  background-size: 100% auto;  background-size: auto 100%;  background-size: contain;  background-size: cover;  background-size: 100% 100%;  background-size: 200px 154px;  background-size: auto;  width: 100%;
  height: 500px;
}

Видео по ширине окна браузера

Для видео создаётся отдельная коробка div, которая имеет высоту относительно ширины родителя div, второй элемент с помощью абсолютного позиционирования занимает всё доступное пространство div (подробнее [alistapart.com]).

<style>
.video {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.video iframe, .video object, .video embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video">
    <iframe src="http://www.youtube.com/embed/kWou4mzLTTQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Сохранение пропорций блока div при изменении размера окна

В примере выше div будет масштабироваться согласно соотношения сторон, так как проценты у padding-top и padding-bottom рассчитываются относительно ширины родителя, а не его высоты. Например, с padding-top 25% блок будет пропорционален 4:1, с padding-top 50% — 2:1.

Для того, чтобы такой блок был ограничен определённой высотой и шириной:

<style>
.video {
  position: relative;
  max-height: 100px;
  max-width: 400px;
  /* не обязательно блок должен быть ограничен тем же соотношением сторон, что указано в :before, но тогда следует с помощью overflow: hidden; обрезать всё, что выходит за обозначенные рамки */ 
}
.video:before { 
  content: "";
  display: block;
  padding-top: 25%; /* 25% рассчитывается относительно ширины .video. Чтобы рассчитать процентное соотношение сторон можно воспользоваться конвертером ниже */ 
}
.video div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 3px red inset;
}
</style>

<div class="video">
    <div></div>
</div>

max-width - 100%
max-height -

25

% (значение padding-top у .video:before)

Образец

Изменить размеры YouTube по щелчку мышки

Реализация для картинок показана в предыдущей статье. Теперь для YouTube.

15 25 35 45

<style>
.YouTube {text-align: center; color: #fff;}

.YouTube input {display: none;}

.YouTube label {background: #000; padding: 5px 7px;}

.YouTube label:hover, .YouTube input:checked + label {background: rgba(0, 0, 0, 0.6);}

.YouTube input:nth-of-type(1):checked ~ div {width: 200px;}

.YouTube input:nth-of-type(2):checked ~ div {width: 300px;}

.YouTube input:nth-of-type(3):checked ~ div {width: 400px;}

.YouTube input:nth-of-type(4):checked ~ div {width: 500px;}

.YouTube > div {
  margin: 0 auto;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;}

.YouTube > div > div {
  padding-bottom: 56.25%;
  position: relative;}

.YouTube iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;}

</style>

<div class="YouTube">
  <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">200</label> <input type="radio" name="odin" id="vkl2"/><label for="vkl2">300</label> <input type="radio" name="odin" id="vkl3"/><label for="vkl3">400</label> <input type="radio" name="odin" id="vkl4"/><label for="vkl4">500</label>
  <div>
    <div>
      <iframe src="http://www.youtube.com/embed/kWou4mzLTTQ?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>