- Зображення за розміром екрану
- Мінімальна ширина для елементів, таких після float, в гумових шаблонах
- Фон за розміром екрану
- Відео по ширині вікна браузера
- Збереження пропорцій блоку div при зміні розміру вікна
- Змінити розміри YouTube одним помахом мишки
Зображення за розміром екрану
Якість фотографії при цьому стилі 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; } .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?