Image dissapears when I set its height to auto

Question

How can I set the height of the image to auto so that the image adjusts to the width?

When I set the height of the image to auto the image disappears.

https://jsfiddle.net/e62La57n/ (You have to click run for the site to load)

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

Does this answer your question? [Responsive css background images](https://stackoverflow.com/questions/12609110/responsive-css-background-images) — ikiK, Jun 13 '20 at 21:20
I would like to be able to make the height: auto and only set the width so the image is repsonsive depending on the width — , Jun 13 '20 at 21:25

score 1 · Accepted Answer · answered Jun 13 '20 at 21:40

You can do it using the :after that you're using and with the <img> tag also. You can make the image's height relative to the section's height (100% or 200% whatever you want) rather than the p to span the full width like below :

I've implemented via both.

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>

Hope this helps !

Image dissapears when I set its height to auto

1 Answers1