Картинка масштабируемая под размеры блока средствами разметки

@SoPrNo · Регистрация: 15.10.2013

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

Приветствую!
Дамы и господа, такой вопрос: есть ли возможность заставить картинку в блоке фиксированных размеров иметь следующее поведение средствами разметки и CSS, но без использования (max-height)&(max-width):

если и высота, и ширина картинки меньше блока - картинка сохраняет исходные размеры;
если высота картинки больше высоты блока, то она уменьшается до высоты блока, а ширина - пропорциональное уменьшение;
если ширина картинки больше ширины блока, то она уменьшается до ширины блока, а высота - пропорциональное уменьшение;

Собственно, сабж.

Проблематика состоит в том, чтобы всю эту "красоту" кушал аутлук 13 версии, который крайне негативно настроен ко всем "новомодным" CSS свойствам. Прежде чем скриптить, хотел убедиться, что нет каких-то хитрых или просто неочевидных методов, которые бы могли дать желаемое чистой разметкой-стилем.

@whiteapps · 28.04.2015, 12:32

SoPrNo,
поставить картинку на бэкграунд и использовать background-size

@SoPrNo · 29.04.2015, 10:04 **[ТС]**

whiteapps, благодарю за оперативный ответ!
Вы предлагаете использовать что-то по вроде этого?

HTML5
1
2
3
4
5
<table align='center' valign='center' height='150' width='182' cellpadding='0' cellspacing='0'>
                    <tr><td style='background-image: url(http://my.jetscreenshot.com/demo/20150428-mu6k-25kb.jpg); background-size: contain;'  align='center' valign='center' height='150' width='182' cellpadding='0' cellspacing='0'>
                     <!-- style="HEIGHT: 150px; WIDTH: auto" height="150" -->
                     <!--<img style='max-height: 150px; max-width: 182px;' src="" >-->
                    </td></tr></table>

Если я правильно всё понял, то к сожалению это решение не подходит - бекграунд для аутлука тоже несьедобен, проверил только что.
Тащемта, там целая тьма этих несапортимых свойств: https://www.campaignmonitor.com/css/

Добавлено через 21 час 2 минуты
Что ж, как я понимаю, подобного решения всё же нет. Ну, и на том спасибою.

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@SoPrNo 1 / 1 / 1 Регистрация: 15.10.2013 Сообщений: 18

	Картинка масштабируемая под размеры блока средствами разметки 28.04.2015, 12:28. Показов 3701. Ответов 2 Метки нет (Все метки) Приветствую! Дамы и господа, такой вопрос: есть ли возможность заставить картинку в блоке фиксированных размеров иметь следующее поведение средствами разметки и CSS, но без использования (max-height)&(max-width): если и высота, и ширина картинки меньше блока - картинка сохраняет исходные размеры; если высота картинки больше высоты блока, то она уменьшается до высоты блока, а ширина - пропорциональное уменьшение; если ширина картинки больше ширины блока, то она уменьшается до ширины блока, а высота - пропорциональное уменьшение; Собственно, сабж. Проблематика состоит в том, чтобы всю эту "красоту" кушал аутлук 13 версии, который крайне негативно настроен ко всем "новомодным" CSS свойствам. Прежде чем скриптить, хотел убедиться, что нет каких-то хитрых или просто неочевидных методов, которые бы могли дать желаемое чистой разметкой-стилем. 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	28.04.2015, 12:32
	SoPrNo, поставить картинку на бэкграунд и использовать background-size 0

Картинка масштабируемая под размеры блока средствами разметки

Решение