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

Question

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

我希望图片在loyalty-diagram.png和loyalty-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＆amp;媒体查询：

//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：

＆＃13;

＆＃13;

 .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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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">

在上面的代码中，您需要定义的只是宽度大小，然后以逗号分隔图像。

希望它会有所帮助：-）