带有 image-aligned 个字幕的响应式图片

Question

很长一段时间以来，我一直在使用设计控制来交付图像。然后我使用 CSS 来隐藏或不隐藏块中的特定图像。

现在我想使用 with 以获得更大的灵活性和控制力。

我的问题出在标题上。我想将我的标题相对于图像对齐，就像我可以使用一样，而不是在它的容器 div 内。目前我的标题只能在容器对齐时对齐。如果图像居中，则标题居中，如果 right-aligned 标题为 right-aligned。我可以做的，并且我正在尝试弄清楚如何独立地做，是让我的图像在页面上居中，并且我的标题 right-aligned 相对于图像。令人困惑？

这是我目前正在使用的示例：

    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>

如有任何想法或建议，我们将不胜感激。如果有帮助，我可以创建一个代码笔...

Answer 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>

带有 image-aligned 个字幕的响应式图片

Responsive images with image-aligned captions

css

responsive