CSS: как распространить ширину от фотографии до родительского или прародительского элемента?

Question

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

Мой HTML выглядит так:

<div class="photo">
  <a href="images/name.jpg">
    <img src="thumbs/name.jpg">
  </a>
  <div class="caption">Imagine long caption here</div>
</div>

И вот одна из моих многочисленных попыток CSS:

div.photo {
    margin: 5px;
    float: left;
    height: 7cm;
    margin-bottom: 3cm;
}

div.photo img {
    display: block;
    max-height: 7cm;
    width: auto;
}

div.caption {
    padding: 15px;
    text-align: center;
    display : block;
    width: 90%;
    overflow : auto;
}

Вот что я думаю, я делаю:

1. Фиксированная высота на photo элемент помещает все на одной высоте.

2. Нижний край на photo Элемент освобождает место для подписи.

3. Дано max-height а также width: auto На изображении сохраняется соотношение сторон.

4. На подписи, text-align а также display свойства имеют заголовок по центру и оборачиваются правильно.

Вот что я не делаю:

• photo Элемент становится достаточно широким, поэтому многие надписи намного шире, чем содержащиеся на нем фотографии, особенно когда фотография имеет "узкий портрет" с соотношением сторон 9:16.

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

Answer 1

Посмотрите на вариант ниже. Вы можете установить ширину фигуры на авто, и на этот раз она должна правильно изменить размер. Надеюсь это поможет! HTML:

<figure class="photo">
<img src="photo.jpg">
<figcaption>
Caption goes here.
</figcaption>
</figure>

CSS:

figure {
    display:table;
    margin:14px;
    padding:7px;
}
figure.photo {
    float:right;
}