Resizing an image based on browser size

Question

I'm trying to resize a background image on my Square space website (link here) based on the size of the user's browser window. More specifically, if the user's window size drops below a certain width then the image adjusts to a smaller size and maintains its aspect ratio.

This seems to be a common issue. I've been digging for hours now and can't seem to find a solution. I'm using JavaScript to do the work, but it won't get it done.

Mind you all, I'm talking about something different than fluid resizing (i.e. using percentage values).

I've run this code through a quality validation and it came back with no syntax errors. So beyond this, I'm lost.

I injected this (jQuery) script into the page header:

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < 1500) {
            $(".widescreen").attr("height", "480px");
        } else {
            $(".widescreen").attr("height", "768px");
        }
    }
    imageresize(); //Triggers when document first loads    

    $(window).on("resize", function() {
        imageresize();
    });
});

.widescreen {
  background: url(https://i.imgur.com/96pxGnd.jpg) center top no-repeat;
  background-size: cover;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 768px;
  /* Trying to change this value so the rest of the CSS adjusts accordingly */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Is the syntax wrong? Please help! And thank you in advance.

Possible duplicate of [Automatically resize images with browser size using CSS](https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css) — Geshode, Jan 10 '18 at 04:51
For a couple of reasons: 1. To keep some rigidity to the design 2. So I know how to change the design for different devices — Julian Brooks, Jan 10 '18 at 19:46

score 0 · Accepted Answer · answered Jan 10 '18 at 04:53

0

There is no height attribute for divs recognized by the browser so

$(".widescreen").attr("height", "480px");

is adding height="480px" tothe code but that doesn't tell it to render differently.

I think you want

$(".widescreen").css("height", "480px");

answered Jan 10 '18 at 04:53

JasonB

6,243
2
17
27

Holy crap, this made so much sense! Even better: it worked! Thank you so much! – Julian Brooks Jan 10 '18 at 19:44

score 0 · Answer 2 · answered Jan 10 '18 at 04:54

0

you should use css media queries to check screen size and then set your desired styles here is a good tutorial for that also you can use bootstrap img-responsive class it is easier to use here you can find an example for that

answered Jan 10 '18 at 04:54

Mohsen Jalalian

1,062
2
18
32

score 0 · Answer 3 · answered Jan 10 '18 at 05:08

Try media screen for this!

@media screen and (min-width: 0px) and (max-device-width: 900px) {
  .image {
     width: 200px
  }
}

@media screen and (min-width: 900px) {
  .image {
     width: 500px
  }
}

<html>
  <header>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />
  </header>
  <body>
    <img class="image" src="https://static.bhphotovideo.com/explora/sites/default/files/Correct.jpg" />
  </body>
</html>

score -1 · Answer 4 · edited Jan 11 '18 at 01:51

-1

This issue can be resolved using the following code snippet in CSS, as it is better to use the max-width property for the images. This tag will use the percentage value for the width of the images.

Please add,

img {max-width:100%};

edited Jan 11 '18 at 01:51

Muhammad Omer Aslam

22,976
9
42
68

answered Jan 10 '18 at 05:23

Ddevil Prasad

117
1
14

Resizing an image based on browser size

4 Answers4