Блог

Главная - Вопросы по программированию - Адаптивные изображения с подписями, выровненными по изображению

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

#css #responsive

#css #адаптивный

Вопрос:

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

Теперь я хотел бы использовать with для большей гибкости и контроля.

Моя проблема с подписью. Я хотел бы выровнять свою подпись относительно изображения, как я могу это сделать, а не внутри его контейнера div. На данный момент моя подпись может быть выровнена только по мере выравнивания контейнера. Если изображение центрировано, заголовок центрируется, если заголовок выровнен по правому краю, заголовок выровнен по правому краю. Что я мог бы сделать, и я пытаюсь выяснить, как это сделать независимо, так это центрировать мое изображение на странице, а заголовок выровнять по правому краю относительно изображения. Сбивает с толку?

Вот пример того, с чем я работаю в данный момент:

     div.dImage {
      text-align: center;
      margin: 0 auto 2% auto;
    }

    div.dCaption {
      text-align: center;
      margin: 0 2% 0 0;
      font-size: 0.8em;
      line-height: 1.2em;
      font-style: italic;
    }  
 <div class="dImage">
    <picture>
        <source srcset="https://picsum.photos/200/300" media="(min-width: 1025px)" />
        <source srcset="https://picsum.photos/200/300" media="(min-width: 800px)" />
        <img src="https://picsum.photos/200/300" alt="Image Title Here">
    </picture>
    <div class="dCaption">
        Image Caption Here
    </div>
</div>

Любые идеи или предложения будут высоко оценены. Я могу создать Codepen, если это будет полезно…

Ответ №1:

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

 div.dImage {
  text-align: center;
  width: max-content;
  margin: auto;
}

div.dCaption {
  text-align: center;
  margin: 0 2% 0 0;
  font-size: 0.8em;
  line-height: 1.2em;
  font-style: italic;
  text-align: right;
}  
 <div class="dImage">
<picture>
    <source srcset="https://picsum.photos/id/100/500/300" media="(min-width: 1025px)" />
    <source srcset="https://picsum.photos/id/100/500/300" media="(min-width: 800px)" />
    <img src="https://picsum.photos/id/100/500/300" alt="Image Title Here">
</picture>
<div class="dCaption">
    Image Caption Here
</div>
</div>

Комментарии:

1. ширина изображения: макси-контент; это именно то, что мне было нужно. Спасибо.