CODEWITHSUNDEEP
htmlcsscss-position
user13585926
user13585926

Reputation:

Image dissapears when I set its height to auto

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

Upvotes: 1

Views: 83

Answers (1)

Hemant Parashar
Hemant Parashar

Reputation: 3774

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 !

Upvotes: 1

Related Questions