时间戳

首页 > 解决方案 > 当我将其高度设置为自动时，图像消失

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

问题描述

如何将图像的高度设置为自动，以便图像调整为宽度？

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

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;
 }

标签： htmlcsscss-position

解决方案

您可以使用: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>

希望这可以帮助 ！

推荐阅读