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

Posted

技术标签:

【中文标题】响应式和动态背景图像 - 最佳实践【英文标题】:Responsive & Dynamic Background Image - best practice 【发布时间】:2018-01-03 18:01:03 【问题描述】:

很长一段时间,当我必须创建一个包含许多不同页面的网站(并且每个页面都有一个带有不同背景图片的英雄部分)时,我曾经这样做:

<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中(所以客户端可以随时更改)

【问题讨论】:

【参考方案1】:

您发现srcset 属性了吗? srcset 所做的是它允许您在 &lt;img&gt; 标记中添加多个图像并为其设置某些条件。根据满足的条件,将显示相应的图像。是时候举个例子了

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

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

它的作用是发现用户视口宽度有多大,比如 500px 宽,因此您的图像 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

【讨论】:

谢谢!我实际上正在为我的图像使用 srcset 。但在我的情况下,我觉得使用背景图像会更相关。这就像一个大标题的背景图片(基本上是英雄部分)。你认为使用 img 标签会比使用背景图片更好吗? 首先,很高兴能帮助您学习新知识。 srcset 是学习和使用响应式网页设计的一个非常有价值的属性。其次,我不想完全肯定地说,但我认为没有办法在没有 CSS 的情况下设置背景图像。在 html5 之前,您可以使用一个 &lt;body background: " "&gt; 标记,但据我所知,该标记已被弃用。如果您需要设置背景图片,则需要使用 CSS @media 查询。非常容易学习,也是一些对 Web 开发非常宝贵的知识。 w3schools.com/css/css_rwd_mediaqueries.asp 是的,实际上我不想在 css 表中设置图像,因为我希望客户端能够自行更改它(例如在 CMS 中)。我一直在考虑做一个 JS 插件,但我不得不承认 srcset 确实很好用,你可以调整很多参数。同时,我有点想为这种特定类型的部分使用 bg-img【参考方案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

【讨论】:

这里的问题是您加载了 3 张图片而不是 1 张。在我的情况下,这是巨大的图片,我不希望它们被加载到移动设备上【参考方案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"  style="display: none">
     </div>
     <div class="hero1">
         <img src="https://cdn.pixabay.com/photo/2012/03/03/23/13/tulips-21598_960_720.jpg"  style="display: none">
     </div>
     <div class="hero2">
         <img src="https://cdn.pixabay.com/photo/2016/10/07/14/01/tangerines-1721620_960_720.jpg"  style="display: none">
     </div>

【讨论】:

以上是关于响应式和动态背景图像 - 最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

iPhone应用程序编程中网络呼叫请求/响应的最佳实践[关闭]

使用 zend 框架创建动态侧边栏的最佳实践

有状态集最佳实践的动态扩展

在服务器上存储图像的最佳实践

阿里云 CDN HTTPS 最佳实践——动态密钥套件

加速网站的最佳实践