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

@VadimuSSS · Регистрация: 23.06.2014

Студворк — интернет-сервис помощи студентам

Картинка к примеру в оригинале ширина 800px на длинну 350px.
Мне нужно, чтоб она была резиновой, но как сделать резиновой длинну - я не знаю. Выставляю ширину 60% (это идентично 800px в моем случае) а длинна остается фиксированной. Я хочу результата, что бы при уменьшении окна браузера и соответственно уменьшении ширины картинки, длинна уменьшалась соответственно. На данный момент сжимая окошко браузера, ширина уменьшается, а высота остается прежней, что приводит к тотальной деформации картинки. Как возможно реализовать это?

@hardwaremaster · 15.10.2014, 00:17

Задайте просто ширину без высоты, если вы не задаете высоту значит она где-то автоматически задается. Можно еще добавить height: auto;
Ну в общем что бы прапорцианально изменялась хватает того что бы просто задать ширину без фиксированой высоты

@VadimuSSS · 15.10.2014, 15:59 **[ТС]**

hardwaremaster, если не указать высоту, то картинка "схлопывается" по вертикали. Грубо говоря - ее попросту нет.

@hardwaremaster · 15.10.2014, 16:33

а если

CSS
1
2
width: 100%;
height: 100%;

и так не работает?

@Fedor92 · 15.10.2014, 17:01

Вам же уже всё сказали... В чём проблема?

@VadimuSSS · 15.10.2014, 17:52 **[ТС]**

hardwaremaster, так как картинка не 800 на 800, а 800 на 350, то при употреблении height 100% и width 100% картинка деформируется.
P.S. Картинка залита в css. Тоесть по факту - является фоном DIVa

Добавлено через 2 минуты
Fedor92, картинка лежит не в теге img, а обернута блоком. картинка - фон блока.

@hardwaremaster · 15.10.2014, 17:56

т.е. это backgraund?

если это background то зачем ширина и высота?

задать background-size: 100%;

@Fedor92 · 15.10.2014, 17:56

Тогда совсем смешная ситуация поскольку для фона надо задавать фиксированную высоту и ширину... А чтобы увидеть бэкграунд блок надо дополнительно наполнить контентом...

@VadimuSSS · 15.10.2014, 18:18 **[ТС]**

hardwaremaster, да, background. bg-size 100% не дает никакого результата.
Fedor92, Значит, нет никаких вариантов, чтоб блок подстраивался под размер фона и при этом был резиновым. Гиблое дело, да?

@Fedor92 · 15.10.2014, 18:44

Варианты есть всегда просто изначально не надо искать простых путей решения казалось бы для очевидной задачи... Всё зависит от того, что Вы хотите изобразить... Если например в данный блок с фоном поместить контент, чтобы он занял всё пространство, т.е. всю ширину и высоту блока, тогда ничего невозможного нет... Всё, как я уже сказал зависит от наполнения... А можно например воспользоваться свойством z-index... Поместить картинку в блок, а поверх неё разметить блоки контента, тоже не самый плохой вариант...

@inquisitor · 20.10.2017, 02:42

Сообщение от Fedor92

Вам же уже всё сказали... В чём проблема?

style.css ???

Добавлено через 11 секунд

Сообщение от Fedor92

Вам же уже всё сказали... В чём проблема?

style.css ???

@Freeze_Breeze · 20.10.2017, 14:39

Вот тут посмотри. http://dbmast.ru/adaptivnye-iz... oshhyu-css

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167

	"Умная" резиновая картинка 14.10.2014, 19:01. Показов 29533. Ответов 11 Метки нет (Все метки) Картинка к примеру в оригинале ширина 800px на длинну 350px. Мне нужно, чтоб она была резиновой, но как сделать резиновой длинну - я не знаю. Выставляю ширину 60% (это идентично 800px в моем случае) а длинна остается фиксированной. Я хочу результата, что бы при уменьшении окна браузера и соответственно уменьшении ширины картинки, длинна уменьшалась соответственно. На данный момент сжимая окошко браузера, ширина уменьшается, а высота остается прежней, что приводит к тотальной деформации картинки. Как возможно реализовать это? 0

@hardwaremaster 307 / 307 / 142 Регистрация: 12.02.2014 Сообщений: 1,165 Записей в блоге: 1
	15.10.2014, 00:17
	Задайте просто ширину без высоты, если вы не задаете высоту значит она где-то автоматически задается. Можно еще добавить height: auto; Ну в общем что бы прапорцианально изменялась хватает того что бы просто задать ширину без фиксированой высоты 1

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	15.10.2014, 15:59 [ТС]
	hardwaremaster, если не указать высоту, то картинка "схлопывается" по вертикали. Грубо говоря - ее попросту нет. 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	15.10.2014, 17:52 [ТС]
	hardwaremaster, так как картинка не 800 на 800, а 800 на 350, то при употреблении height 100% и width 100% картинка деформируется. P.S. Картинка залита в css. Тоесть по факту - является фоном DIVa Добавлено через 2 минуты Fedor92, картинка лежит не в теге img, а обернута блоком. картинка - фон блока. 0

@hardwaremaster 307 / 307 / 142 Регистрация: 12.02.2014 Сообщений: 1,165 Записей в блоге: 1
	15.10.2014, 17:56
	т.е. это backgraund? если это background то зачем ширина и высота? задать background-size: 100%; 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 17:56
	Тогда совсем смешная ситуация поскольку для фона надо задавать фиксированную высоту и ширину... А чтобы увидеть бэкграунд блок надо дополнительно наполнить контентом... 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	15.10.2014, 18:18 [ТС]
	hardwaremaster, да, background. bg-size 100% не дает никакого результата. Fedor92, Значит, нет никаких вариантов, чтоб блок подстраивался под размер фона и при этом был резиновым. Гиблое дело, да? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 18:44
	Варианты есть всегда просто изначально не надо искать простых путей решения казалось бы для очевидной задачи... Всё зависит от того, что Вы хотите изобразить... Если например в данный блок с фоном поместить контент, чтобы он занял всё пространство, т.е. всю ширину и высоту блока, тогда ничего невозможного нет... Всё, как я уже сказал зависит от наполнения... А можно например воспользоваться свойством z-index... Поместить картинку в блок, а поверх неё разметить блоки контента, тоже не самый плохой вариант... 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	20.10.2017, 14:39
	Вот тут посмотри. http://dbmast.ru/adaptivnye-iz... oshhyu-css 0