Как в css задать размер изображения: css3 — Как изменить размер картинки через CSS?

Как изменить размер изображения без потери качества

Как изменить размер изображения без потери качества

1 Загрузите изображение.

2 Введите размеры ширины и высоты.

3 Сжать изображение.

4 Загрузите изображение с измененным размером.

Инструменты изменения размера изображения

Adobe Photoshop Express

Resizing.app

BeFunky

PicResize

Готовы изменить размер?

Создаваете ли вы веб-сайт, публикуете сообщение в блоге или запускаете платформу в социальных сетях для своего бизнеса, изображения имеют важное значение.

Пользователи ожидают высококачественных изображений надлежащего размера. Они важны для того, чтобы ваш веб-сайт или бренд выглядел профессионально и завоевали доверие пользователей. Представьте себе два сайта электронной коммерции, продающие одну и ту же пару обуви: на одном есть размытые и искаженные снимки экрана продукта, а на другом – кристально чистые.

У чего вы, скорее всего, купите? Изображения также важны для передачи важной информации пользователю. Практическое руководство по CSS с изображениями во всю ширину более эффективно и предпочтительнее, чем руководство с эскизами изображений.

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

Часто в этом дополнительном времени загрузки нет необходимости. Скажем, у вас есть изображение размером 2000 x 2000 пикселей, но контейнер, в котором оно находится, имеет размер всего 200 x 200 пикселей. В этом случае ваш браузер по-прежнему загружает каждый пиксель, даже если он ограничен гораздо меньшей областью отображения. Это означает, что браузер должен загружать в десять раз больше, чем необходимо.

Не существует стандартной ширины или высоты, к которой вы должны стремиться при изменении размера изображений. Это будет зависеть от множества факторов, в том числе от того, где вы размещаете их на своем веб-сайте, от того, используют ли большинство ваших посетителей настольные или мобильные устройства и так далее. Общее практическое правило состоит в том, что вы хотите найти баланс между минимальным размером файла и приемлемым качеством. Как правило, допустим размер файла изображения не более 100 КБ.

В этом посте мы рассмотрим, как изменить размер изображения без потери качества. Для этой демонстрации мы будем использовать бесплатный инструмент Adobe Photoshop Express, но основные шаги применимы к любому инструменту. Затем мы кратко рассмотрим другие инструменты для изменения размера изображения, чтобы вы могли найти подходящий для своего веб-сайта.

Как изменить размер изображения без потери качества

1. Загрузите изображение.
2. Введите размеры ширины и высоты.
3. Сжать изображение.
4. Загрузите изображение с измененным размером.

1 Загрузите изображение.

С помощью большинства инструментов изменения размера изображения вы можете перетащить изображение или загрузить его со своего компьютера. Некоторые инструменты, такие как Squoosh, даже позволяют копировать и вставлять изображение.

2 Введите размеры ширины и высоты.

Допустим, размер изображения, который вы хотите изменить, составляет 6000 x 4000 пикселей, и вы хотите изменить его размер до 598 x 398 пикселей, чтобы сделать его избранным изображением вашего сообщения в блоге. Вам просто нужно ввести эти размеры и нажать кнопку «Изменить размер изображения». После изменения размера нажмите «Загрузить» на панели инструментов в верхней части экрана.

3 Сжать изображение.

Изменение размера изображения значительно уменьшит размер файла изображения. Но вы можете пойти еще дальше, сжав его. Для сжатия изображения многие инструменты предлагают скользящую шкалу. Перемещение влево от шкалы уменьшит размер файла изображения, но также его качество. Перемещение вправо увеличит размер и качество файла.

С этим конкретным изображением мне почти не нужно перемещать масштаб влево, чтобы уменьшить размер файла до менее 100 КБ.

4 Загрузите изображение с измененным размером.

Теперь вы можете загрузить изображение с новыми размерами и загрузить его на свой веб-сайт.

Ниже вы можете найти сравнение между исходным изображением размером 6000 x 4000 пикселей и измененным размером 598 x 398 пикселей. Выглядит неплохо, правда?

Инструменты изменения размера изображения

Ручное изменение размера каждого изображения, которое вы загружаете на свой веб-сайт, потребует огромных затрат времени и энергии – и, вероятно, некоторого опыта в графическом дизайне. Хорошая новость в том, что вы можете упростить процесс с помощью инструмента изменения размера изображения.

Ниже представлена ​​коллекция лучших инструментов для изменения размера изображений. Они различаются по функциональности и цене, поэтому вы можете выбрать наиболее подходящий для своих нужд и бюджета. Давайте начнем.

Adobe Photoshop Express

Adobe Photoshop Express – это бесплатный инструмент для редактирования фотографий, который позволяет изменять размер, сжимать и обрезать любое изображение за несколько кликов. Вы можете изменить размер фотографии для Facebook, изображения профиля LinkedIn, баннера Twitter, эскиза Youtube или снимка экрана. Вы можете изменить размер любого количества изображений бесплатно, но вам нужно будет создать учетную запись для их загрузки.

Resizing.app

Resizing.app – это бесплатный инструмент для редактирования фотографий с невероятно простым интерфейсом. Вы можете изменить размер изображения по ширине, высоте, проценту, наибольшей стороне или другому настраиваемому значению. После изменения размера изображения вы можете оптимизировать его с помощью скользящей шкалы и преобразовать. Одним из недостатков этого инструмента является то, что он не показывает размер файла при его оптимизации. Это может затруднить понимание того, когда прекратить сдвигать шкалу вправо.

BeFunky

BeFunky разработан как Photoshop для начинающих. Он богат функциями, но представлен в удобном интерфейсе. Вы можете изменять размер, обрезать и вращать изображения, добавлять настраиваемую графику, рамки, наложения и текстуры и многое другое. С помощью Batch Image Resizer от BeFunky вы даже можете изменять размер изображений сразу, а не по одному. Есть бесплатная версия со 125 доступными цифровыми эффектами и премиум-версия с сотнями других.

PicResize

С PicResize вы можете легко изменять размер, обрезать и редактировать изображения бесплатно. Вы можете уменьшить изображение, задав заранее заданные проценты или задав ширину и высоту в пикселях. Важно отметить две вещи. Бесплатная версия PicResize предназначена только для сжатия фотографий; вам придется приобрести PicResize Pro, чтобы увеличить их. Вы можете сжимать только форматы файлов JPG, а вместо ползунка есть раскрывающееся меню с вариантами: хорошо, лучше, лучше. Хотя вы не видите размер файла изображения, вы можете установить максимальный размер файла.

Готовы изменить размер?

Изменение размера изображений без потери качества – важный навык, независимо от того, являетесь ли вы владельцем сайта, маркетологом в социальных сетях, блоггером или кем-то еще. К счастью, этот процесс прост благодаря множеству бесплатных и дополнительных инструментов, доступных в Интернете. Вы можете изменить размер изображений за меньшее время и повысить скорость своего веб-сайта и в результате порадовать посетителей.

Источник записи: https://blog.hubspot.com

Способы изменения размеров изображений и обрезки фото в Adobe Photoshop

Вы здесь: Главная » Web Design » Photoshop » Способы изменения размеров изображений и обрезки фото в Adobe Photoshop

При работе с изображениями довольно часто бывает нужно изменить размер изображения, как для печати фотографии, так и для подготовки ее для web-страниц. Давайте рассмотрим способы изменения размеров изображений и обрезки фото, которые доступны в Adobe Photoshop.

И начнем мы с настройки единиц измерения, т.к. это будет важно для получения размеров.

Настройка единиц измерения в Adobe Photoshop

Скорей всего при первом запуске Adobe Photoshop вы увидите, что все значения измеряются в дюймах (

in, или inches). Однако для ваших целей удобнее будут сантиметры или пиксели. Один из самых простых способов изменить единицы измерений в Photoshop — это отобразить линейки (Ctrl + R от англ. Rulers — линейки) и кликом по правой кнопке мыши выбрать нужные единицы.

Второй способ — это открыть настройки Photoshop (Меню Edit → Preferences, или Ctrl + K), выбрать пункт Единицы измерения и линейки (Units & Rulers) и установить их в соответствующих местах, как на скриншоте ниже.

Изменение размеров изображения

В меню Image (Изображение) выбираем пункт Image Size (Размер изображения) или нажимаем сочетание клавиш Ctrl + Alt + I.

В открывшемся окне видим поле для ввода ширины (width) и высоты изображения (hight), а также для разрешения (resolution). Для web стандартным разрешением является 72dpi, для печати — 300dpi. Это количество точек на дюйм, которое создает плотность изображения. Для экрана такая плотность должна быть в несколько раз меньше, чем для печати, т.к. и сам экран имеет определенное количество пикселей в матрице. Поэтому, если вы готовите фото для web-сайта, то разрешение должно быть 72dpi, т.к. это ведет к уменьшению веса изображения при сохранении его качества для просмотра на экране. Когда же вы готовите фото для печати, то, напротив, разрешение нужно увеличивать до 300dpi, т.к. иначе печать будет размытой.

Для ширины и высоты слева по умолчанию включен «замок» — иконка, говорящая о том, что при изменении одного параметра второй будет пересчитан автоматически. Как правило, его не отключают, т.

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

Для изображений для web необходимо указывать значения в пикселях (px), для фото, которое вы готовите к печати — в сантиметрах (cm), если иное не указано в требованиях типографии или студии фотографии.

Инструмент обрезки, или кадрирования (Crop Tool)

Инструмент кадрирования вызывается нажатием на клавишу C, которая является начальной в англоязычном названии этого инструмента (Crop Tool). При использовании этого инструмента вы создаете рамку обрезки для фото либо произвольного размера, либо вполне определенного. Именно поэтому название этого инструмента в некоторых версиях Photoshop переводится, как  «Рамка».

Для указания размеров обрезки фото необходимо воспользоваться палитрой параметров (

options) в верхней части рабочего пространства Adobe Photoshop. В примере выше мы устанавливаем размер обрезаемой области, как 1920x600px и разрешение в 72px/inch.

Для того чтобы подтвердить операцию кадрирования, нужно нажать клавишу Enter или сделать двойной клик внутри кадрируемой области, либо нажать кнопку в виде галочки справа на палитре настроек инструмента обрезки. Если вы хотите отменить операцию кадрирования, нажмите клавишу ESC или перечеркнутый кружок справа вверху. В том случае, если вас не устраивают настройки, сделанные для инструмента кадрирования, и вы хотите их отменить, нажмите стрелку с поворотом влево.

Вы также можете указать в настройках инструмента кадрирования, что нужно оставлять и показывать отсекаемые области, выбрать цвет и непрозрачность области, которая накрывает отсекаемые части фото.

Используем размер текущего изображения

Обычно на сайтах есть ряд изображений, которые имеют одинаковые размеры — слайдеры, фотогалереи, блоки с фото логотипов партнеров компании и т.п. Дизайнеры, как правило, добавляют фото в прямоугольники одного размера, обрезая лишнее масками обрезки. Однако в реальности фотографий может быть больше, чем заготовил дизайнер, т.к. их в процессе разработки сайта может добавлять клиент. Поэтому уже перед верстальщиком или программистом может стоять вопрос, как подогнать размеры всех фотографий под одну величину.

Можно, конечно, использовать такой css-свойство, как overflow: hidden, но это не всегда лучший выход, т.к. фотографии могут быть достаточно большими по размеру и приводить к долгой загрузке страницы.

В Adobe Photoshop есть настройка

Front Image, которая позволяет «взять» размеры текущего изображения и установить эти значения для ширины, высоты и разрешения инструмента кадрирования. После этого для каждого нового файла с картинкой вам нужно будет только выбрать положение рамки обрезки.

На примере видно, что исходное изображение имеет размер 240x360px (это видно из окна Image → Image Size) . Этот размер мы устанавливаем в качестве настроек инструмента обрезки (Crop Tool), а затем обрезаем по такому размеру еще 2 изображения. Удобно, не так ли?

Изменение «заваленного горизонта»

«Заваленный горизонт» — это вид фото, когда явная или неявная линия горизонта смещена под углом. Как правило, получается при наклоне фотоаппарата. Явная линя горизонта видна на тех фото, на которых есть пустое пространство с видимым горизонтом. Неявная — когда фото снято в лесу, парке или в городе, но при этом элементы пейзажа (ручей, скамейка, крыши домов и т.п.) находятся под углом к другим объектам на фото.

Для выравнивания линии горизонта необходимо использовать кнопку Straighten (Выпрямление). После этого вы проводите вдоль искаженного горизонта линию, и Photoshop переворачивает ваше изображение так, чтобы линия горизонта стала прямой. Остается нажать клавишу Enter для подтверждения обрезки фото.

Инструмент Линейка для выравнивания линии горизонта

В качестве альтернативы Crop Tool для выравнивания линии горизонта вы можете использовать инструмент Линейка (Ruler Tool). Он находится в группе инструментов Пипетка (Eydropper Tool) и может быть вызван клавишей I. Для переключения между инструментами группы можно использовать Alt + клик

на инструментах группы, пока не появится нужный, либо сделать правый клик на активном в данный момент инструменте группы и выбрать Линейку.

Этим инструментом также нужно провести линию вдоль вашего заваленного горизонта, а затем нажать на кнопку Выровнять слой (Straighten Layer) в палитре настроек  справа вверху. В результате вы получите перевернутое изображение на белом или ином фоне, которое нужно будет обрезать инструментом кадрирования (Crop Tool) или с помощью выделения, описанного чуть ниже.

Изменение размера изображения после выделения

Для указания области обрезки вы можете использовать инструмент прямоугольного выделения (Marquee Tool).  По умолчанию вы будете выделять область изображения с произвольными размерами. Однако в настройках инструмента  прямоугольного выделения также можно задать фиксированные размеры (Fixed Size), например 200x300px, как в примере, или пропорции выделения, например 1:1 или 3:2. Затем вы переходите в меню Image (Изображение) и выбираете пункт Crop (Кадрировать, или Обрезать).

Когда область выделения уже сформирована, подведите курсор внутрь ее и переместите эту область при необходимости.

Чтобы снять выделение, нажмите сочетание клавиш Ctrl + D. Для отмены любых действий в Adobe Photoshop нажмите Ctrl + Z (в версиях до 2019 года — Ctrl + Alt + Z ).

Изменение размеров холста

В некоторых случаях вам может понадобится рамка вокруг вашего изображения или дополнительное место для размещения дополнительных фото для коллажа внутри открытого в Adobe Photoshop файла. Тут может пригодится возможность работы с холстом — виртуальным фоновым слоем вашего фото. Для вызова окна с настройками перейдите в меню Image — Canvas Size (Изображение — Размер холста)  или нажмите сочетание клавиш Ctrl + Alt +C.

Увеличение размера холста

Для добавления размеров холста вам нужно увеличить данные в полях ширины и высоты и выбрать точку, относительно которой будет происходить добавление размеров. По умолчанию — это центр вашей фотографии. Добавление размеров будет происходить одинаково относительно центра.

Если вам необходимо добавить к текущим размерам определенное количество пикселей или сантиметров, поставьте флажок Relative (Относительно) и укажите в полях Width (Ширина) и Height (Высота) только добавочные значения. Они будут добавлены к размерам фото без вашего пересчета этих величин.

Поскольку вы увеличиваете размеры холста, нужно будет указать цвет добавляемого пространства. Вы можете выбрать его из выпадающего списка внизу диалогового окна Canvas Size (Размер холста). Можно позаботиться об этом заранее, выбрав цвет переднего плана (Foreground color) или цвет фона (Background color) и использовав их в настройках, или выбрать нужный цвет с помощью Color Picker.

В примере выше было создано несколько рамок разного цвета вокруг изображения. Однако с помощью изменения размеров холста можно добавить пространство к фото для создания на его основе какого-либо коллажа, например, или отзеркаливания этого изображения.

Уменьшение размера холста

Если в полях для указания ширины и высоты холста поставить отрицательные значения при установленном флажке «Относительно» (Relative) или указать значения меньше, чем текущий размер изображения, то фото будет уменьшено до нужного размера путем обрезки лишних пикселей. Вы при этом получите предупреждение вида «The new canvas size is smaller than current canvas size; some clipping will ocure.«, т.е. «Новый размер холста меньше, чем текущий; будет произведена обрезка фото«, которое сообщает вам о том, что часть фото будет потеряна. При нажатии на кнопку «Proceed» (Продолжить)  вы получите изображение указанного вами размера, как если бы воспользовались инструментом кадрирования с нужными величинами. При этом вы также можете указать, с какой стороны будет выполняться такая обрезка.

На примере ниже изображение было уменьшено почти в 2 раза за счет удаления части пикселей сверху и по бокам.

Тримминг (Image → Trim)

Для обрезки какого-либо сплошного фона или прозрачных пикселей на изображении в Adobe Photoshop есть также отличное решение. Откройте картинку и перейдите меню Image (Изображение), чтобы  выбрать пункт Trim (Тримминг). В настройках вы сможете выбрать, какой цвет вас интересует — в верхнем левом или правом нижнем углу, либо убрать прозрачные пиксели в PNG или  GIF-изображениях. Также в настройках можно указать, какие стороны будут удалены (Trim Away) с изображения: top — верхняя, bottom — нижняя, left — левая, right — правая.

На примере видно, что логотип с белым фоном стал значительно меньше, а с картинки с растением в горшке были удалены прозрачные области.

 

Изменение размеров изображения с прозрачностью после экспорта

В том случае, когда вы экспортируете из Adobe Photoshop изображение с прозрачными областями, которые больше, чем изобразительная часть этого файла, то Photoshop обрежет лишние пиксели аналогично тому, как это происходит при тримминге.

В примере ниже исходное изображение имеет размер 712x512px, а полученное в результате экспорта в PNG —  размер в 508x405px. Это следует учитывать, т.к. в зависимости от того, какя картинка нужна после экспорта, это может быть как плюсом, так и минусом.

 

Просмотров: 399

Как установить/изменить размер изображения с помощью адаптивных изображений CSS PLUS – 3 способа

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

В этом уроке мы узнаем, как установить размер изображения с помощью свойств CSS. Я также покажу вам способы сделать изображения адаптивными, чтобы по мере уменьшения экрана (от рабочего стола компьютера до смартфона) размер изображения изменялся с помощью CSS.

Как установить размер изображения с помощью CSS?

Во-первых, давайте рассмотрим основы — настройку размеров изображения в CSS. Для этого я дважды использовал одно и то же изображение в приведенном ниже примере. Первое изображение имеет исходный размер, тогда как второму изображению присвоен класс CSS. Взгляни:

См. онлайн-демонстрацию и код

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<Голова>       исходный размер Установите размер по CSS

Во втором теге img вы можете увидеть класс CSS (imgsize). Там мы указали ширину и высоту в пикселях. Однако, если вы измените размер окна или посмотрите пример на смартфоне, должны быть полосы прокрутки, а изображения должны быть того же размера, что и на большом экране.

Сначала взгляните на размер изображений в процентах, а затем я покажу вам, как сделать эти изображения отзывчивыми.

Пример размера изображения в процентах

В приведенном ниже примере показано использование % для установки размера изображения. В примере первое изображение имеет исходный размер, второе — 50% контейнера, а третье — 150%:

См. онлайн-демонстрацию и код

1 2 3 4 5 6 7 8 10 110003 12 13 14 0003 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<Голова>             Original size < /h4> 50% от исходного изображения =»images/css-image-size.jpg» />         150 % исходного изображения       -size.jpg» />

Как сделать изображение адаптивным с помощью CSS?

Существуют определенные приемы, позволяющие сделать изображения такими же отзывчивыми, как с помощью CSS. Это зависит от требований — например, разрешение изображения реагировать на любую высоту и ширину по мере его изменения. Точно так же вы хотите, чтобы изображение реагировало на определенную ширину или высоту и т. д.

В первом примере ниже показано создание адаптивного изображения при изменении размера экрана — для этого не установлено никаких ограничений. Посмотрите и попробуйте изменить размер экрана и посмотреть, как изображение настраивается без полос прокрутки:

См. онлайн-демонстрацию и код

1 2 3 4 5 6 7 8 10 110003 12 13 14 1999 0001 9000 2 14 9000 3 9000 3 9000 3 9000 2 9000 2 14 9000 3 9000 3 9000 2 9000 3 9000 3 9000 3 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

Итак, создайте класс CSS и просто укажите ширину 100% и значение высоты auto . Примените этот класс к тегу img для изображения, которое вы хотите сделать адаптивным.

Пример установки максимальной высоты и ширины для адаптивного изображения

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

Для установки максимальной высоты/ширины вы можете использовать свойства CSS max-height и max-width , как показано в примере ниже:

См. онлайн-демонстрацию и код 33

1 2 3 4 5 6 7 8 10 110003 12 13 14 1999 0001 9000. 15 9000 3 9000 2 9000. 15 9000 3 9000 2 9000 3 9000 3 9000 2 14 9000 3 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

jpg» />

Точно так же вы можете установить свойства min-height и min-width .

Сделайте изображения адаптивными с помощью srcset и атрибута размеров

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

С помощью этой техники вы можете указать разные изображения для разных устройств/размеров экрана. Таким образом, вы можете изменить размер изображений самостоятельно, используя такие инструменты, как Photoshop. Вы сможете указать, какое изображение используется для конкретного устройства.

Теги для этого метода: srcset и size Атрибут, который используется в HTML-теге img. См. пример ниже:

См. онлайн-демонстрацию и код

1 2 3 4 5 6 7 8 10 110003 12 13 14 9000 15 9000 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

изображения/BS4-SLIDE-2. JPG 800W « SRC =» Images/BS4-Slide-2.jpg «Alt =» DEMO IMGSRC «> 0003

Для ясности я использовал два разных изображения (тот, что в демо выше, и банан. jpg). На живых сайтах вы можете использовать те же изображения, изменив размер самостоятельно.

Кроме того, приведенная выше демонстрация работает для двух размеров экрана, то есть 480 и 800 пикселей. Вы можете указать большую ширину в соответствии с необходимостью.

Чтобы узнать больше о srcset, перейдите к его руководству здесь.

Адаптивные изображения с помощью Bootstrap

Если ваш проект основан на платформе Bootstrap, сделать адаптивные изображения довольно просто. Все, что вам нужно сделать, это использовать адаптивный класс:

• .img-жидкость

Ниже приведен пример адаптивного изображения с использованием Bootstrap 4:

См. онлайн-демонстрацию и код

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

0/comstrapd=»https://maxcdn.0.boot -beta.3/css/bootstrap.min.css» целостность=»sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy» crossorigin=»anonymous»>

Измените размер экрана, и вы увидите, как настраивается изображение.

Адаптивный текст на основе размера изображения

Мы все сталкиваемся с таким требованием, когда нам нужно сделать заголовок под (или над) изображением, чтобы не превышать ширину изображения. В большинстве случаев нам нужно, чтобы они имели одинаковую ширину.

Общие решения:

• Сделать ширину заголовка такой же, как и изображения: не динамическое решение, так как нам приходится вручную регулировать ширину каждый раз, когда мы используем другое изображение ❌
• Вручную вставить разрыв строки внутри заголовка: Нет! очень плохая идея ❌
• Сделайте заголовок position:absolute , чтобы можно было использовать width:100% , который будет ссылаться на контейнер размером с изображение. .. слишком сложно, и это сделает наш текст нелогичным ❌

Вот простое решение этой задачи. Никакой жесткой ширины, никакого нестандартного контента и всего несколько строк CSS:

 

   <изображение>
    
Lorem ipsum dolor ..
 

 

Войти в полноэкранный режимВыйти из полноэкранного режима

 .box {
  отображение: встроенный блок;
}
ч2 {
  ширина: 0;
  минимальная ширина: 100%;
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Да это оно!

Этот трюк основан на двух вещах:

1. Мы делаем контейнер (элемент box ) элементом , сжимаемым до подгонки (его ширина определяется его содержимым). Я использовал встроенный блок , но это может быть элемент с плавающей запятой, элемент таблицы , гибкий элемент и т. д.
2. Мы делаем наш заголовок цифрой ширина равна 0 , поэтому она не будет влиять на ширину контейнера. Ширина нашего контейнера будет определена как , только по изображению. Мы добавляем min-width: 100% , чтобы изменить размер нашего заголовка и сделать его ширину равной ширине контейнера (той, которая была определена ранее с изображением!). Да, это немного безумно или скажем так волшебно 😉

Некоторые рабочие примеры

Во всех приведенных выше примерах ширина заголовка определяется изображением.

---

Этот трюк не ограничивается только изображением + заголовком. Он может работать с любой конфигурацией, где мы хотим, чтобы элемент A определял ширину элемента B

Заголовок определяет ширину изображения.

Заголовок определяет ширину абзаца

Думаю, все поняли. Ограничений нет, и для этого трюка можно рассматривать любой элемент (даже со сложным содержанием).

---

Мы можем распространить ту же логику на конфигурацию столбцов, чтобы один столбец определял высоту другого. На этот раз мы будем полагаться на высота:0; минимальная высота:100% .

Это немного сложно, так как использование или высота в процентах нетривиальны (мы все знаем пророчество, которое гласит: «родитель должен иметь явно заданную высоту»)

Чтобы преодолеть это, я рассмотрю сетку CSS конфигурация, в которой мне не нужна явная высота.

Ниже левый столбец определяет размер правого. Последний получит полосу прокрутки, когда его содержимое превысит заданную высоту.

Из спецификации можно прочитать:

После того, как таким образом установлен размер каждой области сетки, элементы сетки размещаются в соответствующие содержащие их блоки. Для этой цели ширина и высота области сетки считаются определенными .

Элемент сетки может безопасно использовать height:100% внутри своей области сетки, и эта область сетки будет иметь свою высоту, определенную на основе содержимого, и поскольку один из них имеет height:0 , он не будет способствовать этому высота (да, та же магия, что и выше 😉)

Flexbox также можно использовать здесь, но нам нужна дополнительная обертка для элемента, который будет использовать height:0;height:100%

Нам нужна дополнительная обертка, потому что мы будем полагаться на выравнивание по растяжению flex-элементов, чтобы иметь наш определенный размер, который будет использоваться в качестве ссылки для процента.