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

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

Качество фотографии при этом стиле 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.

<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>
в f t
наверх ↑

31 комментарий:

Космо Мизраил Горыныч
NMitra, в хромиуме (у меня Яндекс.интернет) ютуб работает также, как и в мазилке. И у обоих загрузилось со второго раза х_х

Рекламный баннер занимает много места. А так реагирует правильно.
Евгения
В Хроме всё отлично работает)
NMitra
Спасибо за помощь!
Алексей Куликов
Здравствуйте!
Этот код только для Bloger?
Что-то на WP он у меня отображается мягко говоря не корректно! Может ему моя тема не подходит!?

Но ,все равно, спасибо за материал!
NMitra
Здравствуйте, это универсальный код. Возможно у вас в шаблоне уже упоминаются данные классы. Попробуйте заменить "video" и "YouTube" на какой-нибудь "video202" и "YouTube202".
Алексей Куликов
Очень жаль!!! Привлекательная подача видео и экономия пространства...

Не помогает добавление цифр в коде (переименование YouTube). И самое прикольное, что после добавления кода и обновления, видео в админке показывается корректно!!! а на странице перекошено??? где-то код конфликтует!?!?!?!
NMitra
Так сложно сказать. Возможно есть вложение в div с display: table-cell; или display: inline-block;. Или скрипты, ограничивающие IFRAME.
Евгений Бикмаев
В последнее время у меня в посты блога и на страницы перестали добавляться картинки. При создании поста картинка добавляется, а после публикации в блог пост уже открывается без картинки. То же самое и с видеороликами. При открытии поста для редакции картинки нет уже и в самом поле для внесения текста поста. Это происходит уже достаточное время, и я не знаю в чём дело. Иногда даже из-за наличия картинок не сохраняется и весь пост, и в блоге открывается только заголовок. Раньше всё было нормально. Некоторое время назад то же самое было с функцией "Читать полностью", но теперь она, как видите, перестала исчезать,

а с картинками не знаю что и делать
NMitra
Смотрю на статью от 14 июня, картинка присутствует.
Евгений Бикмаев
Спасибо за отклик, я уже решил проблему. Может, вам пригодится: дело в браузере, мне через некоторое время в самом Блоггере написали, что теперь он не поддерживает Эксплорер, загрузите хром. Я загрузил в Хроме. Но потом и на Эксплорере все наладилось.
Гадко всё-таки, да? Не хотите использовать наш браузер? А на другом не пойдёт наш Блоггер)))
NMitra
Мда... Гугл официально заявил, что использует и разрабатывает свои проекты только под последние версии браузеров, типа они более надёжны, но чтобы так! В этом году Microsoft (bing) отвоевал часть пользователей из поиска Google. С помощью Хрома Гугол оттяпал пользователей у Яндекса (реклама на TV была исключительно о браузере, поскольку качество поиска отстаёт - языковые особенности). Словом это не наша война.

В целом с переходом на новый интерфейс много ошибок повылазило. С другой стороны, много чего внедряют, например, сейчас я вижу новую микроразметку для вновь созданных блогов.
Slava
Спасибо за инфу
Pani Prijatnaja
Что значит Блоггер не поддерживал Эксплорер. Быть такого не может. Вам просто предложили загрузить хром и правильно сделали. IE очень капризный к коду шаблона, остается таким до сих пор. Вечно нужно под IE подстраиваться, так как многие несчастные - кто по незнанию, кто не по своей воле - им пользуются.
А разработчики стараются создавать новые версии браузеров исправляя ошибки. Так внешний вид сайтов в Опере 10 отличается от вида в Опере 12.
NMitra
"IE очень капризный к коду шаблона" - я так не считаю. Последняя версия вполне адекватная. И в нём не больше проблем, а по моему опыту меньше, чем в Гугл Хром. Я всё чаще встречаюсь именно с косяками Хрома.

Понятно, если разрабатывать шаблон для IE 6, то тогда ваши претензии уместны. Но глупо сравнивать IE 6 с Хромом, того ещё в проекте не было.

Хром мне так совсем не импонирует - изобретает нововведения, которые никто не поддерживает, а элементарные вещи показывает криво.

Самый без проблемный - Mozilla Fifefox. Далее Опера. Они создавались именно как браузеры, а не придатки поисковиков. У них нет прямой рекламы, они работают на качество. Иначе не смогут конкурировать с гигантами.
Елена Родионова
Здравствуйте! Как сделать, чтобы окошко (и картинка в нем) подстраивалось под размер окна браузера?
http://testblog-777.blogspot.com/2014/03/photo-005.html
NMitra
Так у вас всё подстраивается, нужно лишь немного подождать.
Елена Родионова
Подстраивается только в хромоподобных браузерах. Как можно прописать хак для мозиллы?
NMitra
Что именно подстраивается? У меня Mozilla Firefox, всё работает.
Елена Родионова
Картинка не вписывается в окно браузера по высоте
NMitra
Покажите, пожалуйста, скриншот.
vodkomotornik
Который раз замечаю - у тебя советы и рецепты самые четкие, внятные и полезные!
NMitra
Спасибо, что похвалили, очень приятно! :)
Анонимный
А возможно ли сделать так, чтобы при уменьшении окна картинка уменьшалась к центру или низу? Например, если взять фото со статьи, как сделать чтобы при уменьшении в центре оставался только текст или лицо девочки?
NMitra
К центру (пример http://jsfiddle.net/NMitra/cguxd5nu/ )

<div></div>

<style>
div {
background: #fff5d7 url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s1600/parovozik.jpg) no-repeat 50% 50%;
padding-top: 50%;
}
</style>
роман шадчин
Подскажите: в мобильном шаблоне видео больше чем сам сайт (при входе с мобильного). Мне посоветовали http://c2n.me/3sdS1OA в стили пда шаблона добавьте следующие стили:

.entry iframe {max-width: 100%;}

что именно нужно прописать и куда именно добавить - Юкоз
роман шадчин
Беру видео на свой сайт на ютубе,поделиться,iframe
NMitra
Роман, я не смотрела Юкоз, поэтому не знаю что там да как. При написании статьи, наверно, можно переходить на вкладку "HTML", туда добавьте этот код http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#video

роман шадчин
Все оказалось намного проще: в стилях в конце страницы прописал .entry iframe {max-width: 100%;} и все стало нормально.
NMitra
Отлично!
Rino Man
Подскажите пожалуйста как вставить 3 и более таких видео на страницу
NMitra
В Ютуб получаете код интересующего видео: "Поделиться"-"HTML-код". Стили (то, что между тегами <style> ... </style> включительно) прописываете один раз. А дальше обёртываете полученный iframe в <div class="video"> ... </div> Каждый iframe в свой div