html - 设置图像大小修复文本

Question

我有一个带有图像的缩略图 div，我想设置其中带有文本的图像修复的大小。

<div class="thumbnail">
        <img src="/image/<%=dream.dreamimage%>"  alt="User image" class="img-thumbnail img-responsive img-user">
        <div class="caption">
            <h3><%=dream.dreamtitle%></h3>
            <p><%=dream.dreamdiscription%></p>
            <p><%=dream.dreamlocation%></p>
        </div>
        </div>

Answer 1

这可能是您正在寻找的效果。如果我对描述有误解，请告诉我。

您需要设置为 inline-block，这样它就不会尝试填充整个宽度，然后使用 object-fit 来覆盖剩余空间。

.container {
  position: relative;
  display: inline-block;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.text {
  color: red;
  position: relative;
  display: inline-block;
}

<div class="container">
  <img src="https://avatars3.githubusercontent.com/u/2626231?s=460&v=4" class="image" />
  <p class="text">This is the text</p>
</div>