当我将其高度设置为自动时图像消失

Question

如何将图片的高度设置为自动，以便图片适应宽度？

当我将图像的高度设置为自动时，图像消失了。

https://jsfiddle.net/e62La57n/（您必须单击运行才能加载站点）

<section>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio consequuntur doloremque amet vitae minima natus praesentium!</p>        
</section>

p {
  position: relative;
  max-width: 20em;
  font-size: 1.3em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: darkgrey;
}
    
p::after {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
  background-size: cover;
  background-position: center;
 }

Answer 1

您可以使用您正在使用的 :after 和 <img> 标签来完成。您可以使图像的高度相对于该部分的高度（100% 或 200%，无论您想要什么）而不是 p 来跨越整个宽度，如下所示：

我已经通过两者实现了。

section{
  position: relative;
  margin: 3em auto;
}
p {
  max-width: 20em;
  font-size: 1.3em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: darkgrey;
}
img{
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  width: 80%;
  height: 200%;
  object-fit:cover;
}
p.img::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  width: 80%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
  background-size: cover;
  background-position: center;
 }

<section>
  <p class="img">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio consequuntur doloremque amet vitae minima natus praesentium!</p>
</section>


<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio consequuntur doloremque amet vitae minima natus praesentium!</p>
  <img src="https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
</section>

希望这对您有所帮助！

当我将其高度设置为自动时图像消失

Image dissapears when I set its height to auto

html

css

css-position