CODEWITHSUNDEEP
javascriptjqueryhtmlcss
yukashima huksay
yukashima huksay

Reputation: 6238

img height as a percentage of the browser window

i want to make a full-width picture slider with jquery (myself) and i want it to scale well in any size of the browser in a way that its height is smth like 80% of the browser window's height and resizes as the browser do indeed! this is my html:

<body>
<img class="img_slides" src="../images/1.jpg" alt="1.jpg" width="90%"/> 
</body>

but it doesn't work while if i use width insteed of height the exact thing i want happens! sry if i wrote too much! but otherwise my question wasnt meeting the sites qualities and they couldn't submit it!!

Upvotes: 3

Views: 2205

Answers (2)

AlexARH
AlexARH

Reputation: 212

This should auto-size your image and center it on the page

<div class="wrapper">
  <img class="image" src="#">
</div>


<style type="text/css">
  .wrapper {width: 100%; height: 100%;}
  .image {position:absolute; height: 80%; width:auto; left:0; right:0; top:0; bottom:0; margin:auto}
</style>

// EDIT

<body style="width:100%; height:100; margin:0">
  <img class="image" style="position: absolute; height: 80%; width: auto; left: 0; right: 0; top: 0; bottom: 0; margin: auto;" src="url.jpg">
</body>

Upvotes: 3

knitevision
knitevision

Reputation: 3143

Codepen e.g.

img {
    height: 80%;
}

body, html {
    height: 100%;
}

You need to have body & html height set to 100% because by default they don't take 100% of the viewport. Without it, setting image's height to 80% won't work.

Upvotes: 3

Related Questions