使用 CSS 控制 figcaption 相对于图形中响应式图像的位置答案

【问题标题】：Controlling the location of figcaption relative to a responsive image within a figure using CSS使用 CSS 控制 figcaption 相对于图形中响应式图像的位置
【发布时间】：2018-07-17 18:35:30
【问题描述】：

我正在组建一个需要显示响应式图像的网站，其中图像始终与浏览器顶部对齐，并且标题被固定到紧邻图像下方并与图像左边缘对齐的位置.

我的图像表现完美，但我无法控制 figcaption 的位置，除非相对于图。如何控制相对于图像的figcaption？？？我想要发生的是让无花果标题在图像的正下方和左边缘对齐（不对齐中心）。它似乎总是在图的底部结束。我已经阅读了大约 25 篇文章，试图了解如何做到这一点。

提前致谢！

这是我的 HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<link href="test02.css" rel="stylesheet" type="text/css">
</head>

<body>

    <figure class="niag">
        <img class="hero" src ="Images/IMG_5678.jpg" alt=""/>
        <figcaption>This is one of my nicest images</figcaption>
    </figure>

</body>
</html>

这是我的 CSS

.niag {
/*      display: block;*/
    position: relative;
    height: auto;
    border: 1px dotted gray;    
    }
.niag figcaption {

    border: 1px dotted blue;
    position: absolute;
/*    bottom: 0;*/
    left: 0;
    right: 0;
    }
.hero {
    display: block;
    height: 85vh;
    width: 100%;
    object-fit: contain;
    object-position: top;
    }

【问题讨论】：

而不是底部：0；使用顶部：100%；，然后注意图底部的边距或填充，因此 figcaption 不要与下面的内容重叠；）
所以这不起作用这是我对 CSS 所做的：@charset "UTF-8"; /* CSS 文档 */ .niag { border: 1px dotted gray; } .niag figcaption { 边框：1px 蓝色虚线；最高：100%； } .hero { 显示：内联块；高度：85vh；宽度：100%；适合对象：包含；对象位置：顶部；边距底部：0； }
您是否尝试过下面答案中的 sn-p .. 还是我误解了这个问题？（很可能，我的普通英语经常欺骗我 ..）... 文本将跟随图形元素，而不是在 img 标签内看到图像大小调整的位置 ....
首先 - 感谢您的建议。我确实尝试了您在下面发布的内容，但是随着您减小浏览器窗口的宽度，图像不再调整大小。如果我添加 width: 100% 图像宽度确实会随着浏览器窗口的宽度而减小，但我会丢失纵横比。所以我添加了 object-fit: contains;然后我回到广场 1 !!!!!!
图像根据对象拟合值调整大小。给定一个边框或背景色来查看图像标签的位置，然后使用适合对象的值来查看行为。 developer.mozilla.org/en-US/docs/Web/CSS/object-fit

标签： html css figure

【解决方案1】：

试试top:100% + margin-bottom

想法的演示

* {
  margin:0
}
.niag {
  position: relative;
  height: auto;
  border: 1px dotted gray;
  margin-bottom: 1.5em;/* update*/
}

.niag figcaption {
  border: 1px dotted blue;
  position: absolute;
  top: 100%;/* update*/
  left: 0;
  right: 0;
}

.hero {
  display: block;
  height: 85vh;
  width: 100%;
  object-fit: contain;
  object-position: top;
}

<figure class="niag">
  <img class="hero" src="http://dummyimage.com/1200x600" alt="" />
  <figcaption>This is one of my nicest images</figcaption>
</figure>
next-content

如果想法是在图像的bottom left 处设置文本，则不要使用object-fit，其中img 标签和视觉可能不会覆盖相同的区域，为了保持比例，您可以使用@987654329 @ , display 和 margin:

* {
  margin:0
}
.niag {
  position: relative;
  border: 1px dotted gray;
  margin:0 auto  1.5em;/* update*/
  display:table;
}

.niag figcaption {
  border: 1px dotted blue;
  position: absolute;
  top: 100%;/* update*/
  left: 0;
  right: 0;
}

.hero {
  display: block;
  max-height: 85vh;
  max-width:100%;
}

<figure class="niag">
  <img class="hero" src="http://dummyimage.com/1200x600" alt="" />
  <figcaption>This is one of my nicest images</figcaption>
</figure>
next-content

必须做一些妥协或考虑周全的 javascript sn-p 来处理您的第一个目标

【讨论】：

顺便说一句，height:auto; 是没用的，除非在早期的 CSS 规则中重置之前的高度。
这最后一个建议似乎有效。非常感谢！是什么意思 *{ } ？它是否将随附的规则应用于整个文档？在这种情况下，将边距设置为 0 全局？请原谅我对 css 这方面的无知。谢谢！
@ChrisS 是的，这被用作任何标签的重置。 margin、padding 和 box-sizing 经常被放在一起。但大多数情况下，您会使用完整的 css 文件来重置大多数标签，因此每个浏览器示例中的默认值都是相同的 cssreset.com 。如果答案对您有用且有价值，如果其中一个完全回答了您的问题，您可以投票并接受。

【解决方案2】：

您可以使用网格布局来自动调整图像大小以及将标题与图像对齐：

.niag {
    display: grid;
    grid-template: ". image    ."
                   ". caption  ."
                   /   1fr auto 1fr;
    border: 1px dotted gray;    
    }
.niag figcaption {
    grid-area: caption;
    border: 1px dotted blue;
    }
.hero {
    grid-area: image;
    display: block;
    height: 85vh;
    }

<figure class="niag">
   <img class="hero" src ="http://placekitten.com/800/900" alt=""/>
   <figcaption>My image</figcaption>
</figure>

【讨论】：