用文本设置图像修复的大小

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

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

您需要设置为内联块，以便它不会尝试填充整个宽度，然后使用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>