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

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

Посмотрите на вариант ниже. Вы можете установить ширину фигуры в auto, и на этот раз она должна быть правильной. Надеюсь это поможет! 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; 
}