CODEWITHSUNDEEP
css-positionabsolute
Vahid
Vahid

Reputation: 584

div containing absolute img has zero height

I want to place an image at the top of my html page that sticks to top-left position (left:0, top:0) fills entire width and so it height changes when the window size changes. Other contents of the page must be placed below the image. The image height changes when the window size changes, so I can not use an absolute top for the rest of the html page and the div that contains the image has a zero height because of absolute img inside it. How can I fix this problem?

<div style="">
<img style="position:absolute;left:0;top:0;width:100%;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
other contents of the webpage must be placed below the image.

Upvotes: 0

Views: 429

Answers (3)

Sander Koedood
Sander Koedood

Reputation: 6337

If I understand correctly, this should fix your issue:

body {
  margin: 0;
  padding: 0;
}  

html, body {
  height: 100%;
}

.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  /* Required for extra to center the image */
  position: relative;
}

.image-container img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  
  /* CSS3 extra to center the image */
  -webkit-transform: translate(-50%, -50%); /* for Safari */
  transform: translate(-50%, -50%); 
  position: absolute;
  top: 50%;
  left: 50%;
}
<html>
  <head>
    <title>Full-width image</title>
  </head>
  <body>
    <div class="image-container">
      <img src="http://lorempixel.com/1920/1080" />
    </div>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa lectus, varius vel semper ac, tristique scelerisque metus. Donec ac dui pretium, scelerisque arcu nec, gravida odio. Cras porta nibh ut aliquet posuere. Donec venenatis nulla pellentesque est vulputate accumsan. Suspendisse potenti. Sed ac scelerisque sapien, nec bibendum orci. Praesent ac iaculis lectus. Sed rhoncus, augue sed rutrum tempor, purus sapien tincidunt mi, ultrices faucibus nisi orci non lacus. Vestibulum malesuada, orci id pellentesque gravida, lectus purus tempor urna, a dapibus ipsum est vitae ex. Sed lacinia vehicula vestibulum. Aliquam placerat leo sit amet libero tincidunt, auctor ultricies tellus maximus. Nulla facilisi. Maecenas sit amet nisl eget risus consectetur placerat. Curabitur sodales ante quis augue luctus consectetur. Nunc accumsan fermentum augue, eu pellentesque justo aliquet quis. In ultricies lectus odio, eu aliquam enim pellentesque vel.

Etiam magna ipsum, blandit at faucibus id, condimentum consequat libero. Maecenas leo elit, ornare dapibus sollicitudin et, rhoncus ut velit. Duis euismod scelerisque mauris, sit amet congue diam bibendum at. Suspendisse dictum porta maximus. Etiam sit amet mauris nibh. Nam tempus mollis bibendum. Sed consequat, velit non tincidunt congue, erat velit finibus ligula, et aliquet neque nisl et mi. Nunc sodales ultrices odio, posuere cursus metus tempus faucibus.

Praesent imperdiet varius tempor. Aliquam pharetra auctor sapien, et placerat ipsum rutrum vel. Integer a blandit mauris. Phasellus a odio pretium, ullamcorper purus et, vehicula diam. Vestibulum placerat nunc id imperdiet cursus. Quisque sollicitudin, mi a sollicitudin consequat, sapien augue cursus urna, eget ultrices massa neque in massa. Praesent tempor diam ac lectus gravida, vel fringilla risus aliquet. Maecenas facilisis eros sed diam interdum vehicula a nec risus. Suspendisse potenti.

Proin a finibus nisi, eget ullamcorper elit. Nulla iaculis consectetur convallis. Nulla dignissim mauris egestas purus scelerisque, vel porta quam dignissim. Vestibulum fermentum cursus volutpat. Sed vel libero dui. Praesent consequat imperdiet purus vel sagittis. Vestibulum interdum arcu sit amet luctus bibendum. Quisque non odio luctus, vulputate augue at, imperdiet tellus. Aliquam iaculis massa turpis, vel rutrum tortor tincidunt non. Aliquam euismod magna lectus, ac aliquam nunc malesuada nec. Nulla dapibus euismod mi, imperdiet lobortis nisl egestas vestibulum. Etiam quam felis, euismod tincidunt mattis et, bibendum sed nunc. Quisque viverra sem leo, quis feugiat odio tristique vitae. Maecenas id tortor ac urna vulputate iaculis non ac nulla. Integer at arcu sed felis sodales faucibus a in libero.

Quisque ac malesuada augue, sit amet ornare arcu. Mauris iaculis, ipsum eget rhoncus rutrum, urna erat sollicitudin neque, sed vestibulum nisi lectus at justo. Nam ac ipsum odio. Integer commodo sapien in pellentesque viverra. Aenean pellentesque auctor mauris sed faucibus. Nulla facilisi. Ut pharetra commodo lectus, eu tempor tortor suscipit in. Praesent tempor turpis orci, at tristique purus semper quis.
      </p>
    </div>
  </body>
</html>

This should always fill the screen with the image. It won't scale down, but will scale up (you can test this by setting a smaller size in the URL of the image. http://lorempixel.com/300/300 for example)

EDIT:

In order to make the image the exact width of the window, while retaining it's aspect, you just change the following:

.image-container img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  
  /* CSS3 extra to center the image */
  -webkit-transform: translate(-50%, -50%); /* for Safari */
  transform: translate(-50%, -50%); 
  position: absolute;
  top: 50%;
  left: 50%;
}

To:

.image-container img {
  width: 100%;
  height: auto;
}

Upvotes: 1

Kevin Kloet
Kevin Kloet

Reputation: 1086

you can achieve this by using jQuery.

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
var innerHeight - $('body').innerHeight(); //height PX minus scrollbar

document.getElementById("idGivenToTheImgTag").style.height = innerHeight;
document.getElementById("idGivenToTheImgTag").style.width = innerWidth;

the CSS way of doing it:

body {
margin-top:0;
margin-right:0;
margin-left:0;
}

.yourimageclass {
 width: 100vw;
 }

note: this will set the image to the full viewport width. the scrollbar included in this.

Upvotes: 1

Marc Pont
Marc Pont

Reputation: 1078

The thing is: Why you need to be position absolute? Why don't put the image on the top of the content and it will fill the content himself.

Like: 

<img style="width:100%;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

other contents of the webpage must be placed below the image.

Upvotes: 3

Related Questions