使用Javascript / JQuery进行媒体查询-根据屏幕尺寸更改图像

Question

I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.

I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?

Here's my HTML of the carousel's first slide:

<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide"> 
    <!--slogan and CTA-->
    <div class="container carousel-caption main-slider">
        <div class="row header-slogan fadeInDown animated">
            <div class="col-xs-12">
                <section class="cd-intro">
                    <h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
                </section>
            </div>
        </div>
        <div class="row header-tagline fadeInDown animated">
            <div class="col-xs-12">
                <p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
            </div>
        </div>
        <div class="row header-cta fadeInUp animated">
            <div class="col-xs-12">
                <button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
                &nbsp; <a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a> 
            </div>
        </div>
    </div>
    <!--slogan and CTA end--> 
</div>

Here's my jQuery :

      <script>
  $(document).ready(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
}); 
  </script>

Answer 1

Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:

//Place this in your document ready
$(window).resize(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
});

Answer 2

srcset怎么样 ？

<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">