根据屏幕尺寸显示不同的图像

Question

我遇到了这段代码：how to specify a different image in css depending if the user visits on a desktop or a mobile browser，它非常适合我的目的，但我无法让它工作。

我想根据屏幕大小在loyalty-diagram.png 和loyal-diagram-mobile.png 之间交换图像。

我想知道我的代码中是否有其他东西阻止它工作。

网站示例http://codepen.io/Dingerzat/pen/MbwLBa

编辑：对不起大家所有多余的代码，我会确保在未来更好地编辑我的帖子。

JS

/*!
 * classie v1.0.0
 * class helper functions
 * from bonzo https://github.com/ded/bonzo
 * MIT license
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false */

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);

$('.collapse').on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
});

CSS

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

 @media (min-device-width:320px) {
        img[data-src-960px] {
            content: attr(data-src-960px, url);
        }
    }

    @media (min-device-width:960px) {
        img[data-src-1260px] {
            content: attr(data-src-1260px, url);
        }
    }

body {
  line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

blockquote {
  quotes: none;
}

blockquote:before,
blockquote:after {
  content: '';
  content: none;
}

del {
  text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a img {
  border: none;
}


/* =Scss Variables
-------------------------------------------------------------- */


/* =Global
-------------------------------------------------------------- */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #3cb5f9;
  color: #505050;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: #3cb5f9;
}

a:hover {
  color: #0793e2;
}


/* =Template
-------------------------------------------------------------- */

#wrapper {
  width: 100%;
  margin: 0 auto;
}

#main {
  background-color: #ffffff;
  padding-top: 150px;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 30px;
}

.containertwo {
  width: 86%;
  margin: 0 auto;
  padding: 0 30px;
}

.containertwo h3 {
  font-size: 30px;
  text-align: center;
}

section {
  padding: 60px 0;
}

section h1 {
  font-weight: 700;
  margin-bottom: 10px;
}

section p {
  margin-bottom: 30px;
}

section p:last-child {
  margin-bottom: 0;
}

section.color {
  background-color: #d51c84;
  color: white;
}


/* =Info Bar
-------------------------------------------------------------- */

#info-bar {
  background-color: #000000;
}

#info-bar a {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 10px;
}

#info-bar a:hover {
  background-color: #0793e2;
}

#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
  display: block;
  width: 50%;
}

#info-bar span.all-tutorials {
  float: left;
  text-align: left;
}

#info-bar span.back-to-tutorial {
  float: right;
  text-align: right;
}


/* =Header
-------------------------------------------------------------- */

#logo img {
  height: 40%;
}

header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #000000;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}

header h1#logo {
  display: inline-block;
  height: 150px;
  line-height: 150px;
  float: left;
  font-family: "Oswald", sans-serif;
  font-size: 60px;
  color: white;
  font-weight: 400;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header nav {
  display: inline-block;
  float: right;
}

header nav a {
  line-height: 150px;
  margin-left: 20px;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header nav a:hover {
  color: white;
}

header.smaller {
  height: 75px;
}

header.smaller h1#logo {
  width: 150px;
  height: 75px;
  line-height: 75px;
  font-size: 30px;
}

header.smaller nav a {
  line-height: 75px;
}


/* =Footer
-------------------------------------------------------------- */

*,
*:before,
*:after {
  box-sizing: border-box;
  color: #242424;
  padding: 20;
  margin: 30;
}

html,
body {
  background: rgb(0, 0, 0);
}

.content {
  margin: auto;
  margin-bottom: 350px;
  /* Same height as footer */
}

.fixed_footer {
  width: 100%;
  height: 350px;
  background: #000000;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -100;
  padding: 100px 5px;
}

.fixed_footer p {
  color: #696969;
  column-count: 2;
  column-gap: 50px;
  font-size: 1em;
  font-weight: 300;
}


/* =Extras
-------------------------------------------------------------- */

.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}


/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 660px) {
  /* =Header
  -------------------------------------------------------------- */
  header h1#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  header nav {
    display: block;
    float: none;
    height: 50px;
    text-align: center;
    margin: 0 auto;
  }
  header nav a {
    line-height: 50px;
    margin: 0 10px;
  }
  header.smaller {
    height: 75px;
  }
  header.smaller h1#logo {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  header.smaller nav {
    height: 35px;
  }
  header.smaller nav a {
    line-height: 35px;
  }
}

@media all and (max-width: 600px) {
  .container {
    width: 100%;
  }
  #info-bar a {
    display: block;
  }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    width: 100%;
  }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    float: none;
    text-align: center;
  }
  #info-bar span.all-tutorials {
    border-bottom: solid 1px #0793e2;
  }
}

html,
body {
  margin: 0;
  height: 100%;
}

section {
  position: relative;
  height: 100%;
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  /* &:nth-of-type(1) */
}

section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #fff;
  width: 100%;
  text-align: center;
}

section:nth-of-type(1) {
  /* .paralax-1 */
}

section:nth-of-type(1) .paralax-1 {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* .new-paralax */
}

section:nth-of-type(1) .paralax-1 .new-paralax {
  z-index: -100000;
  transform: translateZ(-8000px) scale(0.4);
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  height: 100%;
  width: 100%;
  position: relative;
  transform: scale(1.3);
  background-color: #ffffff;
  background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg");
}

section:nth-of-type(2) {
  height: 20em;
  background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg");
}

section:nth-of-type(3) {
  background-color: white;
}

section:nth-of-type(4) {
  background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg");
}

section:nth-of-type(5) {
  background-color: white;
}

.collapse {
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #fff;
  padding: 10px;
  margin: 0px;
  max-height: 40px;
  overflow: hidden;
  transition: all 0.4s;
}

.collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.collapse.active {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  z-index: 200;
  color: #444;
  max-height: 3000px;
  padding: 10px 20px;
  margin: 10px -10px;
  transition: all 0.2s, max-height 4.8s;
}

.collapse h2 {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  position: relative
}

.transparent {
  background-color: rgba(255, 255, 255, 0) !important;
  color: #000000 !important;
  box-shadow: none !important;
  margin: 0px !important;
  padding: 20px !important
}

.collapse h2::after {
  content: "+";
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 20px;
  opacity: 0.5;
  right: 0;
  top: 0;
}

.collapse:hover h2::after {
  opacity: 1
}

.collapse.active h2::after {
  content: "-";
}

HTML

<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>

<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<!-- js -->
<script src="js/classie.js"></script>
<script>
  function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 300,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>
</head>


<body>

  <div id="wrapper">

    <header>
      <div class="container clearfix">
        <h1 id="logo">
            <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png">
        </h1>
        <nav>
          <a href="">Lorem</a>
          <a href="">Ipsum</a>
          <a href="">Dolor</a>
        </nav>
      </div>
    </header>
    <!-- /header -->
    <div id="main">
      <div id="content">
        <main class="content" role="main">

          <section>
            <div class="container">
               <div align="center"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" width="125"/><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" width="125"/><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" width="125"/>
              <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" width="125"/>
              <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" width="125"/>
              <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" width="125"/></div><br>
              <h2>Services for Market Research</h2><br>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
              <div class="collapse transparent">
                <h2>CRM & Loyalty consulting</h2>
                <br>  
                <ul style="list-style-type:disc">
  <li>Programme design</li>
  <li>Process audits</li>
  <li>Business plans</li>
  <li>ROI Calculation</li>
  <li>Deployment strategy</li>               

</ul> 
              </div>
              <div class="collapse transparent">
                <h2>Big data & Insight</h2>
                <br> <ul style="list-style-type:disc">
  <li>Data mining</li>
  <li>Segmentation</li>
  <li>Customer insight</li>
  <li>Database management</li>
  <li>Predictive content</li>
  <li>Database hygiene and appending</li>  
                </ul>   
              </div>
              <div class="collapse transparent">
                <h2>Omni-channel marketing</h2>
                <br><ul style="list-style-type:disc">
  <li>Marketing programmes</li>
  <li>Programme launches</li>
  <li>Activation and retention systems</li>
  <li>Cross channel campaigns</li>
  <li>Management and reporting</li>
                </ul>
              </div>
              <div class="collapse transparent">
                <h2>Rewards & Incentives</h2>
                <br><ul style="list-style-type:disc">
  <li>Reward sourcing & purchasing</li>
  <li>Physical and digital rewards</li>
  <li>Exclusive deals and discounts</li>
  <li>Customised gift catalogues</li>
  <li>Fulfilment, delivery and tracking</li>
                </ul>
              </div>
              <div class="collapse transparent">
                <h2>Customer service</h2>
                <br><ul style="list-style-type:disc">
  <li>Omni-channel contact centre</li>
  <li>Distributor and network help desks</li>
  <li>Welcome packs and documentation</li>
  <li>Dispute resolution</li>
  <li>FAQs and guidance</li>
  <li>Self-help facilities</li>
                </ul>
              </div>
              <div class="collapse transparent">
                <h2>Bespoke programmes</h2>
                <br><ul style="list-style-type:disc">
  <li>Monetary or virtual currencies</li>
  <li>Customer VIP clubs</li>
  <li>Recognition programmes</li>
  <li>Cashback programmes</li>
  <li>Social loyalty</li>
  <li>Sponsorship</li>
  <li>Crowdfunding</li>
                </ul>
              </div>
              <div class="collapse transparent">
                <h2>Staff incentives</h2>
                <br><ul style="list-style-type:disc">
  <li>Sales force challenges</li>
  <li>Network management</li>
  <li>Adaptable to all types of organisation</li>
  <li>Staff seniority tiers</li>
                </ul> 
              </div>
<br>
              <p>
                <a href="http://www.bilendi.co.uk">&laquo; Want to know more?</a><br>
                <a href="http://www.bilendi.co.uk">&laquo; Become a citizen!</a>
              </p>
            </div>
          </section>
          <section class="color">
            <div class="container">
              <h1>Cupcakes for the people!</h1>
            </div>
          </section>
          <section class="color">
            <div class="container">
               <div align="middle"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram.png"
     data-src-960px="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram-mobile.png"
     data-src-1260px="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram.png"
     alt="" width="100%" align="middle"></div><br>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
          <section>
            <div class="container">
              <h1>Sugar rush, oh my...</h1>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
          <section>
            <div class="containertwo">
              <h3>Enquire</h2>
              <script type="text/javascript" src="https://bilendi.formstack.com/forms/js.php/bilendi_test_2"></script><noscript><a href="https://bilendi.formstack.com/forms/bilendi_test_2" title="Online Form">Online Form - BILENDI TEST 2</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,2521222" title="HTML Form Builder">HTML Form Builder</a></div>
        </div>
              </section>
    </main></div>
</div><!-- #main -->


<footer class="fixed_footer">
  <div class=" container content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
  </div>
</footer>



</div><!-- /#wrapper -->

</body>
</html>

Answer 1

在你的 HTML 中给图像一个类：

//desktop image with a class of loyalty-diagram  
<img src="" alt="" class="loyalty-diagram" />

//mobile image with a class of loyalty-diagram-mobile  
<img src="" alt="" class="loyalty-diagram-mobile" />

最简单的方法是使用 CSS 和媒体查询：

//desktop
/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width : 1200px) {

  .loyalty-diagram {
     display:block;
   }

   .loyalty-diagram-mobile {
     display: none;
   }

}

//mobile
/* Extra small devices (phones, less than 768px) */
@media (max-width:767px) {

   .loyalty-diagram {
     display:none;
   }

   .loyalty-diagram-mobile {
     display: block;
   }

}

这只是在移动设备上隐藏 .loyalty-diagram.png 图像并在桌面上显示它，反之亦然。

Answer 2

您可以尝试这样的事情，使用 CSS @media 查询来更改 background-image：

 .loyalty-diagram {background:url('loyalty-diagram.png') no-repeat;}


@media only screen and (min-device-width:320px) and (max-device-width:480px),
only screen and (min-device-width:320px) and (max-device-width:568px),
only screen and (min-device-width:360px) and (max-device-width:598px) {

.loyalty-diagram {background:url('loyalty-diagram-mobile.png') no-repeat;
}

<img class="loyalty-diagram" src="blank_1x1.png" alt="Loyalty Diagram" />

Answer 3

<picture alt="description of image">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

Answer 4

我已经在另一篇文章中给出了答案。访问https://stackoverflow.com/a/54397999/2165382

如果无法再访问该帖子，请查看以下答案

我们已经有了根据屏幕尺寸加载图像的功能。您不需要 CSS Media 查询。因为要加载来自数据库的动态图像，动态创建媒体查询是不可行的。

解决方案：

使用srcset属性

示例：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

在上面的代码中，您只需要定义用逗号分隔的图像旁边的宽度大小。

希望对你有帮助:-)