响应式动态背景图片 - 最佳实践

Question

很长一段时间，当我不得不创建一个包含很多不同页面的网站（并且每个页面都有一个带有不同背景图片的英雄部分）时，我曾经这样做过：

<div class="hero" style="background-image: url(my-dynamic-img.jpg)"></div>

以及以下 css：

.hero {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

图像会为每个页面动态加载。例如，在 CMS 中，客户端可以自行更改图像，而无需更改 css

但现在，我意识到它一点也不好，因为你最终会在每个设备（移动设备、平板电脑、台式机...）上加载相同的图像。

所以我想听听您对最佳方法的看法：使用 3 张不同的图像（hero-mobile.jpg、hero-tablet.jpg 和 hero-desktop.jpg ) 对于相同的背景并自动定位好的背景。 3张图片的声明必须在HTML中，不能在css中（这样客户可以随时更改）

Answer 1

您发现 srcset 属性了吗？ srcset 的作用是允许您在 <img> 标签中添加多张图像并为其设置特定条件。根据满足的条件，将显示相应的图像。举个例子

如果您希望图像显示为用户视口宽度的一半，您可以使用

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

它的作用是找出用户视口的宽度有多大，比如说它的 500 像素宽，这样您的图像 images/space-needle.jpg 200w 就会为用户加载。

在此示例中，我们指定图像需要占据屏幕宽度的一半sizes="50vw"。在 500px 宽的屏幕上显示 600px 或 400px 宽的图像并且舒适地只显示在视口的一半是不可能的，所以它选择 200w 选项。

有很多方法可以指定加载图像的条件、设备像素比、屏幕尺寸、浏览器尺寸等等。

教育链接：
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
https://www.udacity.com/course/responsive-images--ud882

Answer 2

有多种方法可以做到这一点，但在您的情况下，由于您希望客户端修改 HTML，您应该在 css 中使用 @media：

例如

然后在 CSS 你应该为每个

有一个媒体查询

@media (min-width: 430px) {


    .tablet {
        display:block !important;
    }
      .mobile {
        display: none !important;
    }
    .desktop{
      display: none !important;
    }
}

@media (max-width: 600px) {
    .mobile {
        display:block !important;
    }
    .tablet {
       display: none !important;
    }
    .desktop{
      display: none !important;
    }
}

@media (min-width: 900px) {
    .tablet {
       display: none !important;
    }
      .mobile {
       display: none !important;
    }
    .desktop{
      display:block !important;
    }
}

示例： https://plnkr.co/edit/Cet7wG4qrK9DcG1vlOVg?p=preview

Answer 3

我们将使用媒体屏幕在移动设备、笔记本电脑和台式机屏幕上显示图像

.hero img{
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width:100%;
   }
  @media screen and (max-width: 500px){
        .hero img{
            display: block !important;
        }
    }
    @media screen and (min-width: 501px) and (max-width:880px){
        .hero1 img{
            display: block !important;
        }
    }
    @media screen and (min-width: 881px){
        .hero2 img{
            display: block !important;
        }  
    }

    <div class="hero" >
         <img src="https://cdn.pixabay.com/photo/2013/06/09/18/50/tulip-123795_960_720.jpg" alt="" style="display: none">
     </div>
     <div class="hero1">
         <img src="https://cdn.pixabay.com/photo/2012/03/03/23/13/tulips-21598_960_720.jpg" alt="" style="display: none">
     </div>
     <div class="hero2">
         <img src="https://cdn.pixabay.com/photo/2016/10/07/14/01/tangerines-1721620_960_720.jpg" alt="" style="display: none">
     </div>

响应式动态背景图片 - 最佳实践

Responsive & Dynamic Background Image - best practice

html

javascript

css

background-image

responsive-design