Как сделать картинку «резиновой? — Вопросы по 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.
Как сделать резиновые картинки с одинаковой высотой?
Есть блок с резиновой шириной, в нем картинка и подпись снизу. Если делать фото резиновыми, то высота блока меняется. На скрине это видно. Первый блок это пример того, как должны быть остальные.
- Вопрос задан более трёх лет назад
- 5084 просмотра
1 комментарий
Оценить 1 комментарий
Резиновые изображения
Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров (включая Internet Explorer версии 7 и выше) не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:
В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:
Они тоже будут масштабироваться, не считая нескольких примечательных исключений вроде видео в теге с сайта YouTube. О том, как с ними справиться, мы поговорим в главе 4. А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.
При использовании этого подхода необходимо учитывать несколько важных моментов. Во-первых, он предполагает упреждающее планирование: добавляемые изображения должны быть достаточно велики для того, чтобы масштабироваться соразмерно крупным областям просмотра. Это приводит нас к следующему, возможно, более важному моменту. Независимо от того, каким будет размер области просмотра или устройство, используемое для обозрения сайта, все равно придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины. В некоторых случаях проблема заключается в скорости канала подключения пользователя, поэтому мы вскоре вернемся ко второму из описанных выше моментов. А пока позаботимся о том, чтобы наши изображения масштабировались.
Вам также могут быть интересны следующие статьи:
- Адаптивное видео
- Условная загрузка с помощью Modernizr
- Пользовательская веб-типографика
- Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
- Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?
«Умная» резиновая картинка
Картинка к примеру в оригинале ширина 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;
Ну в общем что бы прапорцианально изменялась хватает того что бы просто задать ширину без фиксированой высоты