在调整大小时在图像中包含文本
P粉458913655
P粉458913655 2024-03-20 11:25:39
0
1
469

我想在图像中包含一个段落,但它总是溢出。

我希望图像的大小调整得足够长,与段落一样长。

我尝试过使用最小高度,但不起作用。

.image-container{
  position: relative;
  min-height:100vh;
  width: 100%;
  justify-content:center;
  align-items:center;
  display:flex;
}

.truck-image{
  position: relative;
  top:50px;
  object-fit: cover;
  width:100%;
  height:100%;
}

.text-container{
  position: absolute;
  top:110px;
  left:0;
  padding-left: 100px;
  width:30%;
  color:white;
  z-index:3;
}

我想象使用最小高度会在调整大小时根据其屏幕调整容器的大小,从而调整图像的大小,但事实并非如此。

P粉458913655
P粉458913655

全部回复(1)
P粉627027031

我建议以相反的方式看待事情。

它是必须设置父级高度的文本,因此绝对值是行不通的。

如果您将图像设置为父级的背景图像,并使父级遵循文本大小,则图像(给定大小的封面)将自动填充所需的空间。

这是一个基于您提供的 CSS 的简单示例:

.image-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-image: url(https://picsum.photos/id/1016/1024/768);
  background-size: cover;
}

.text-container {
  position: relative;
  top: 110px;
  left: 0;
  padding-left: 100px;
  width: 30%;
  color: white;
  z-index: 3;
}
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板