Игорь!
Вот, как я понял ваш вопрос. Мы вложили изображение в див и задали ему ширину, но ширина дива не уменьшилась до размеров изображения:
По умолчанию див занимает всю доступную ему ширину, а по высоте — столько, чтобы вместить всё содержимое:
<div>
Текст, чтобы див не схлопывался по высоте
</div>
div {
border: 1px solid red;
}Если вложить в див изображение, ширина дива не изменится, высота подстроится под высоту изображения, а изображение покажется в своём оригинальном размере. По умолчанию изображение ещё добавит «паразитный» отступ снизу равный расстоянию между базовой линией и нижним краем строки, так как браузер считает изображения строчными элементами.
<div>
<img src="350x180.svg">
</div>
<div>
<img src="550x180.svg">
</div>
Убрать лишний отступ снизу можно, превратив изображения в блочные элементы:
<div>
<img src="350x180.svg" style="display: block">
</div>
<div>
<img src="550x180.svg" style="display: block">
</div>
Если указать размер изображения 20% от оригинала или от контейнера, див продолжит занимать всю доступную ширину:
<div>
<!-- Уменьшаем изображение до 20% от размера оригинала: 350×180 → 70×36 -->
<img src="350x180.svg" style="width: 70px; height: 36px">
</div>
<div>
<!-- Уменьшаем изображение до 20% от размера оригинала: 550×180 → 110×36 -->
<img src="550x180.svg" style="width: 110px; height: 36px">
</div>
<div>
<!-- Уменьшаем изображение до 20% от ширины дива -->
<img src="350x180.svg" style="width: 20%">
</div>
<div>
<!-- Уменьшаем изображение до 20% от ширины дива -->
<img src="550x180.svg" style="width: 20%">
</div>
Ширина и высота, заданные в процентах, считаются от ширины родителя. В таком случае самый простой способ получить див размером с изображение — завернуть изображение в ещё один див и задать ему ширину, а размер изображения ограничить 100%:
<div>
<div style="width: 20%">
<img src="350x180.svg" style="max-width: 100%">
</div>
</div>
<div>
<div style="width: 20%">
<img src="550x180.svg" style="max-width: 100%">
</div>
</div>
Если размер изображения зафиксирован в пикселях, можно обойтись без обёртки, задав ширину контейнеру, равную min-content
<div style="width: min-content">
<img src="350x180.svg" style="width: 70px; height: 36px">
</div>
<div style="width: min-content">
<img src="550x180.svg" style="width: 110px; height: 36px">
</div>
P. S. Всё становится ещё сложнее, если див — не блочный, а флекс‑ или грид‑элемент. Если это ваш случай, напишите.
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
