Картинка або відео за розміром екрану на CSS

Зображення за розміром екрану
Мінімальна ширина для елементів, таких після float, в гумових шаблонах
Фон за розміром екрану
Відео по ширині вікна браузера
Збереження пропорцій блоку div при зміні розміру вікна
Змінити розміри YouTube одним помахом мишки

Зображення за розміром екрану

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

Мінімальна ширина для елементів, таких після 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; } .Video: before {content: ""; display: block; padding-top: 25%; } .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>

Змінити розміри 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>Com/embed/kWou4mzLTTQ?
Com/embed/kWou4mzLTTQ?

Статьи