- Изображение по размеру экрана
- Минимальная ширина для элементов, следующих после 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>
Изменить размеры 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>
31 комментарий:
Рекламный баннер занимает много места. А так реагирует правильно.
Этот код только для Bloger?
Что-то на WP он у меня отображается мягко говоря не корректно! Может ему моя тема не подходит!?
Но ,все равно, спасибо за материал!
Не помогает добавление цифр в коде (переименование YouTube). И самое прикольное, что после добавления кода и обновления, видео в админке показывается корректно!!! а на странице перекошено??? где-то код конфликтует!?!?!?!
а с картинками не знаю что и делать
Гадко всё-таки, да? Не хотите использовать наш браузер? А на другом не пойдёт наш Блоггер)))
В целом с переходом на новый интерфейс много ошибок повылазило. С другой стороны, много чего внедряют, например, сейчас я вижу новую микроразметку для вновь созданных блогов.
А разработчики стараются создавать новые версии браузеров исправляя ошибки. Так внешний вид сайтов в Опере 10 отличается от вида в Опере 12.
Понятно, если разрабатывать шаблон для IE 6, то тогда ваши претензии уместны. Но глупо сравнивать IE 6 с Хромом, того ещё в проекте не было.
Хром мне так совсем не импонирует - изобретает нововведения, которые никто не поддерживает, а элементарные вещи показывает криво.
Самый без проблемный - Mozilla Fifefox. Далее Опера. Они создавались именно как браузеры, а не придатки поисковиков. У них нет прямой рекламы, они работают на качество. Иначе не смогут конкурировать с гигантами.
http://testblog-777.blogspot.com/2014/03/photo-005.html
<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>
.entry iframe {max-width: 100%;}
что именно нужно прописать и куда именно добавить - Юкоз