Как сделать картинку резиновой
Перейти к содержимому

Как сделать картинку резиновой

  • автор:

Как сделать картинку «резиновой? — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Резиновые изображения

Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров (включая Internet Explorer версии 7 и выше) не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:

В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

Они тоже будут масштабироваться, не считая нескольких примечательных исключений вроде видео в теге с сайта YouTube. О том, как с ними справиться, мы поговорим в главе 4. А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.

При использовании этого подхода необходимо учитывать несколько важных моментов. Во-первых, он предполагает упреждающее планирование: добавляемые изображения должны быть достаточно велики для того, чтобы масштабироваться соразмерно крупным областям просмотра. Это приводит нас к следующему, возможно, более важному моменту. Независимо от того, каким будет размер области просмотра или устройство, используемое для обозрения сайта, все равно придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины. В некоторых случаях проблема заключается в скорости канала подключения пользователя, поэтому мы вскоре вернемся ко второму из описанных выше моментов. А пока позаботимся о том, чтобы наши изображения масштабировались.

Вам также могут быть интересны следующие статьи:

  • Адаптивное видео
  • Условная загрузка с помощью Modernizr
  • Пользовательская веб-типографика
  • Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
  • Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?

Резиновая плитка из картинок

введите сюда описание изображения

!Здраствуйте. Подскажите, как можно сделать вот такую мини-галерею из картинок резиновой. С шириной все в порядке, а высоту никак не задать в процентах. Заранее спасибо)

Отслеживать

задан 16 мар 2019 в 16:15

Elisey Popov Elisey Popov

75 1 1 серебряный знак 6 6 бронзовых знаков

резиновый, это вам на завод красный треугольник 🙂 не понятно что Вам надо 🙂

16 мар 2019 в 16:19

Уменьшается окно, уменьшаются картинки

16 мар 2019 в 16:26

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Высота в % — небольшой хак с помощью

height: 0 padding-bottom: 100% 
html, body < margin: 0; padding: 0; >ul, li < margin: 0; padding: 0; >ul < font-size: 0px; >li < display: inline-block; font-size: 16px; list-style: none; position: relative; width: 25%; >li .bl-img < position: relative; width: 100%; height: 0; padding-bottom: 100%; >li .bl-img img

Отслеживать

ответ дан 16 мар 2019 в 16:27

2,311 2 2 золотых знака 9 9 серебряных знаков 20 20 бронзовых знаков

Теоретически высоту можно задать в процентах, но для этого у родительского блока должна быть фиксированная высота. Возможно, вам подойдут единицы измерения vh. height: 80vh; например, будет означать высоту в 80% от общей высоты экрана, тем самым, при изменении высоты экрана, блок всегда будет занимать 80% высоты всей страницы

Отслеживать

ответ дан 16 мар 2019 в 16:28

131 5 5 бронзовых знаков

«Умная» резиновая картинка

Картинка к примеру в оригинале ширина 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;
Ну в общем что бы прапорцианально изменялась хватает того что бы просто задать ширину без фиксированой высоты

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

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