CODEWITHSUNDEEP
jqueryhtmlcssresizewindow-resize
user4630
user4630

Reputation: 633

Set image size based on browser size?

Is it possible to dictate the size of an image/div based on the browser size when the site is first loaded?

I have the following that tells a div to be the browser size minus the content holder below however, it doesn’t work. If i take the minus bit out it works but to a random height not the height of the browser.

The main site content that appears below the header will be a flexible height as well.

Basically when you load the site the banner image should take up the whole screen regardless of browser size.

jQuery(document).ready(function($) {

   $(document).ready(sizeContent);

   $(window).resize(sizeContent);

   function sizeContent() {
      var newHeight = $("html").height() - $(".site_content").height()  + "px";
    $(".full_image").css("height", newHeight);
   }




});

Fiddle here

Upvotes: 0

Views: 1576

Answers (3)

Joe Sager
Joe Sager

Reputation: 787

This?:

function sizeContent() {
       var newHeight = $(window).height()  + "px";
        $(".full_image").css("height", newHeight);
    }

Fiddle: http://jsfiddle.net/31gax1fk/16/

Upvotes: 1

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

instead of specifing height and width on resize with javascript I think you may be better of using css3

img {
  width:100%;
  max-width:100%;
  height:auto; 
}

this is also responsive when the browser size changes, it automatically gives a height so the images doesn't get stretched

Upvotes: 0

Jack hardcastle
Jack hardcastle

Reputation: 2875

You could do this straight in CSS I believe with vw/vh (view-width/view-height).

Although this would distort this image, if you're just trying to make the image 20% of the browser's size (without distorting), so the browser width rather than width and height then you could just width: 20%; height: auto; in your CSS surely?

or just height: 100%; width: 100%;

Upvotes: 0

Related Questions