Как сделать блок по ширине картинки, но не больше ширины страницы?

Question

[Евгений Обыкновенный]

По ширине картинки с костылем сделал. В качестве блока использую таблицу шириной 1px. Она сама растягивается по ширине картинки. Но как сделать, чтоб таблица не расширялась больше ширины страницы? Если для таблицы и изображения поставить max-width: 100%, то все почти работает. Проблема лишь в том, что таблица растягивается не по ширине картинки, а по ширине текста. Как можно решить эту проблему?
Так надо:
Так получается:

Comments

[Сергей delphinpro]

inline-block сжимаются до содержимого.
основы теории.

[Евгений Обыкновенный]

Сергей: не сжимается.

[Ankhena]

Евгений Обыкновенный: для картинки max-width: 100vw

[Евгений Обыкновенный]

Ankhena W: пробовал уже. Тогда картинка делается маленькая, по размеру текста.

[Ankhena]

Евгений Обыкновенный: Эм.. Картинка будет своего естественного размера.
Может, код свой выложите https://jsfiddle.net/

[Евгений Обыкновенный]

Ankhena W: а понял, там vw. Да, работает почти как надо. Но приходится ставить 90vw, потому что немного вылазит из-за паддингов и полосы прокрутки, видимо.

[Ankhena]

Евгений Обыкновенный: https://webref.ru/css/box-sizing

[Евгений Обыкновенный]

Ankhena W: а все браузеры vw поддерживают?

[Ankhena]

Евгений Обыкновенный: caniuse.com/#search=vw

И от таблицы, наверное, все таки стоит отказаться.

[Евгений Обыкновенный]

Ankhena W:
Чем это

<table style="width:1px"><tr><td>
<img src="...">
<div class="imgcap">Описание картинки</div>
</td></tr></table>

хуже чем это?

<div style="width:1px;"><div style="display: inline-block; text-align:left;"> 
<img src="...">
<div class="imgcap">Описание картинки</div>
</div></div>

[Ankhena]

Евгений Обыкновенный:
1. Погуглите по словам "семантическая верстка".

2.

хуже чем это?

А зачем в "этом" лишние div'ы?

3. Также посмотрите про 2 тега:
figure https://webref.ru/html/figure
и figcaption https://webref.ru/html/figcaption
Именно они служат для решения аналогичных задач.

[Евгений Обыкновенный]

Ankhena W:

А зачем в "этом" лишние div'ы?

Второй div нужен, чтоб блок был растянут ровно по ширине картинки. Иначе текст будет сжат до минимума, будет стремиться сжаться до ширины 1px. Может как-то можно с одним div-ом, но у меня не получается найти решение.

figure https://webref.ru/html/figure
и figcaption https://webref.ru/html/figcaption

Они обладают какими-то особенными свойствами по растяжению?

[Ankhena]

Евгений Обыкновенный:

Они обладают какими-то особенными свойствами по растяжению?

Нет, они к первому пункту того поста

Answer 1

[Vlad Feninets]

есть viewport units.
просто укажи, что ширина эл-та должна быть не больше ширины вьюпорта
max-width: 100vw;