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

Question

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

我的图像表现完美，但我无法控制 figcaption 的位置，除了相对于图形的位置。如何控制相对于图像的figcaption？？？我想要发生的是让无花果标题在图像的左边缘紧靠下方对齐（不是 align-center）。它似乎总是在图形的底部结束。我阅读了大约 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;
    }

Answer 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 标签和视觉可能不覆盖同一区域，而是保持比例，你可以使用 max-height ， 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 片段以处理您的第一个 objective

Answer 2

您可以对图像使用网格布局 auto-sizing 并将标题与图像对齐：

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

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

Controlling the location of figcaption relative to a responsive image within a figure using CSS

html

css

figure