«Умная» резиновая картинка
Картинка к примеру в оригинале ширина 800px на длинну 350px.
Мне нужно, чтоб она была резиновой, но как сделать резиновой длинну — я не знаю. Выставляю ширину 60% (это идентично 800px в моем случае) а длинна остается фиксированной. Я хочу результата, что бы при уменьшении окна браузера и соответственно уменьшении ширины картинки, длинна уменьшалась соответственно. На данный момент сжимая окошко браузера, ширина уменьшается, а высота остается прежней, что приводит к тотальной деформации картинки. Как возможно реализовать это?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Картинка на весь экран и резиновая верстка
Здравствуйте, начал тренироваться верстке, но столкнулся с проблемой адаптивности с фоновой.
Резиновая картинка при position:abolute
Вот такой блок Нужно этот кружок расположить по центру так, чтобы при уменьшении окна его размер.
Дергается картинка при изменении масштаба страницы [резиновая верстка]
Здраствуйте, при использовании резиновой верстки деграется svg-картинка при изменении масштаба, с.
Умная форма
Всем привет! Не силен в access Подскажите, пжл, делаю программу учета входящих звонков и.
Умная кнопка
Здравствуйте! Скажите, как написать код задачи, чтоб при введении слова в текстовом поле и.
307 / 307 / 142
Регистрация: 12.02.2014
Сообщений: 1,165
Записей в блоге: 1
Задайте просто ширину без высоты, если вы не задаете высоту значит она где-то автоматически задается. Можно еще добавить height: auto;
Ну в общем что бы прапорцианально изменялась хватает того что бы просто задать ширину без фиксированой высоты
Резиновые изображения
Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров (включая Internet Explorer версии 7 и выше) не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:
В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:
Они тоже будут масштабироваться, не считая нескольких примечательных исключений вроде видео в теге с сайта YouTube. О том, как с ними справиться, мы поговорим в главе 4. А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.
При использовании этого подхода необходимо учитывать несколько важных моментов. Во-первых, он предполагает упреждающее планирование: добавляемые изображения должны быть достаточно велики для того, чтобы масштабироваться соразмерно крупным областям просмотра. Это приводит нас к следующему, возможно, более важному моменту. Независимо от того, каким будет размер области просмотра или устройство, используемое для обозрения сайта, все равно придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины. В некоторых случаях проблема заключается в скорости канала подключения пользователя, поэтому мы вскоре вернемся ко второму из описанных выше моментов. А пока позаботимся о том, чтобы наши изображения масштабировались.
Вам также могут быть интересны следующие статьи:
- Адаптивное видео
- Условная загрузка с помощью Modernizr
- Пользовательская веб-типографика
- Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
- Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?
Как сделать резиновые картинки с одинаковой высотой?
Есть блок с резиновой шириной, в нем картинка и подпись снизу. Если делать фото резиновыми, то высота блока меняется. На скрине это видно. Первый блок это пример того, как должны быть остальные.
- Вопрос задан более трёх лет назад
- 5098 просмотров
1 комментарий
Оценить 1 комментарий
Как сделать картинку резиновой
Добро пожаловать в проект «Сайт с нуля» !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 — 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla — русские версии.
Автор и администратор данного проекта — SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Адаптивный (резиновый) фон для сайта
Приветствую всех посетителей сайта! Сегодня мы будем рассматривать простую технику создания адаптивного фона, который будет полностью растягиваться на всю ширину окна браузера. То есть, при изменении пропорций окна браузера будут меняться и пропорции фонового изображения сайта.
В настоящее время очень популярно в веб-дизайне использование в качестве фона большой картинки или фотографии, которая занимает весь первый экран. Обычно, в верхней части такого изображения размещают меню, логотип, контакты, а основной контент начинается сразу под фото. Как вариант — использование полноэкранных адаптивных слайдеров, подстраивающихся под размеры экрана пользователя.
Для фона рекомендую подобрать качественное изображение высокого разрешения, чтобы на широкоформатных мониторах не происходило его масштабирование. Ведь если фоновая картинка на широкоформатном мониторе окажется меньше размера элемента body, каковым является «тело» вашего сайта, браузер автоматически масштабирует картинку до нужных размеров, а это чревато появлением пикселизации.
В примере я использую изображение размером 3600 Х 2400рх. Исходный вес картинки 2,18 МБ (а это очень много!) я оставила без изменений, чтобы вы смогли убедиться, что «тяжелые» изображения медленнее загружаются, особенно на мобильных устройствах. Поэтому специально для мобильных гаджетов мы будем использовать второй вариант изображения — более малого размера и веса, например, 768 Х 505 рх.
Подключается малое изображение с помощью медиа-запросов, в которых мы задаем максимальную ширину экрана мобильных устройств, в моем примере она 767рх. То есть, на маленьких экранах до 767рх включительно, будет отображаться меньшее изображение (в целях экономии мобильного трафика и увеличения скорости загрузки), а на экранах размером свыше 767рх будет показываться оригинальное изображение.
И малое, и большое изображения обязательно перед использованием оптимизируйте, уменьшите их вес в одном из онлайн-сервисов . Это займет не больше минуты и позволит «сжать» фото по весу в несколько раз.
Перед тем, как приступить к установке адаптивного фонового изображения, в качестве примера приведу несколько сайтов, где вы можете посмотреть принцип работы адаптивного фона. Изменяйте размер окна браузера и увидите, как меняется фоновая картинка.