更改图像大小Javascript取决于屏幕大小

Question

Am using bootstrap, which for some reason means whenever i try the @media (min-height: 1000px) there is no response from the image class.

I would like to run a javascript that resizes the image when the screen height gets above a certain size. (Lets say 1000 px)

the best code I have found is this

<script>
    $(function() {
        if ($(window).height() >= 710) {
            $("img").each(function() {
                $(this).attr("src", $(this).attr("src").replace("logo1.png", "logo2.png"));
            });
        }
    });
</script>

However when i replace src with width, and change the corresponding values of logo1.png and logo2.png to 500 and 800 nothing happens.

Any pointers using Javascript very much appreciated.

I tried this in CSS

@media screen and (max-width: 980px) and (min-height: 1000px) {
 .iphonegangster {
  min-width: 950px;
  height: auto;
 }

Answer 1

Instead of using JS, you can use CSS media queries with image background. Ex., <i role=image class=img1/> . Using CSS media query pick image based on screen size.