Как сделать чтобы картинка уменьшалась при уменьшении экрана css

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

Весёлый паровозик, прикол

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

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

Весёлый паровозик, прикол

Весёлый паровозик, прикол

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

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

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

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

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

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

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

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

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

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/ )

<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 в стили пда шаблона добавьте следующие стили:

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

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

Пропорциональный ресайз изображения в ширину и в высоту

Там использован стандартный прием с display:block; и max-width:100% для изображений:

Если увеличивать/уменьшать ширину контейнера, то изображение уменьшает/увеличивает свою ширину и одновременно пропорционально уменьшает/увеличивает свою высоту. Это очень крутая особенность изображений, много где выручает.

Как сделать так, чтобы при увеличении/уменьшении высоты контейнера, изображение вело себя подобно первому случаю: высота изображения становилась равна высоте контейнера и ширина изображения тоже пропорционально уменьшалась/увеличивалась? Как это сделать без Яваскрипта? (Как сделать с Яваскриптом я знаю.) Можно использовать самые новомодные CSS3 штуки.

Адаптивное изображение

Фрукты

Для превращения изображения в адаптивное изображение, нужно прописать следующий код в стилевой файл (в CSS):
img <
max-width: 100%;
height: auto;
>
После этого любое изображение на сайте будет адаптивным, то есть изображение будет уменьшатся вместе с уменьшением экрана.
Вот посмотрите на результат:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *