Question

我不是一个前端开发者，但我正在写一个简单的单页网站，其中包含一个图像。我已创建此图像的几个版本，以最小化要在小屏幕设备中下载的位。这个图像应该被扩展＆＃34;水平，所以我也创建了一些应该水平重复的背景图像。见下面的模型：

在我写的代码下面。这是正确的方法吗？我的代码中是否有任何错误，或者这是使用视口的正确方法？虽然它在我的320px iPhone屏幕上运行良好，但我无法在我的桌面浏览器上使用320px版本。总的来说，我不满意。

HTML：

<div id="image" class="fluid-container">
  <center>
    <picture id="banner">
      <source media="(max-width: 320px)" srcset="320w.jpg">
      <source media="(min-width: 1200px)" srcset="1200w.jpg">
      <source media="(min-width: 800px)" srcset="800w.jpg">
      <source media="(min-width: 480px)" srcset="480w.jpg">
      <img src="800w.jpg">
    </picture>
  </center> 
</div>

CSS：

<style>
    #image {
      background-image: url("r320w.png");
      background-repeat: repeat;
    }
    @media (min-width: 480px) {
      #image {
        background-image: url("r480w.png");
        background-repeat: repeat;
      }
    }
    @media (min-width: 800px) {
      #image {
        background-image: url("r800w.png");
        background-repeat: repeat;
      }
    }
    @media (min-width: 1200px) {
      #image {
        background-image: url("r1200w.png");
        background-repeat: repeat;
      }
    }
</style>

Answer 1

看看这支笔：https://codepen.io/anon/pen/XqJRKM

基本上，解决方案是：

#image {
  background-image: url("http://lorempixel.com/output/sports-h-c-1-480-10.jpg");
  background-repeat: repeat;
  background-size:contain;
  width: 100vw;
  background-color:#f00;
}

@media (min-width: 480px) {
  #image {
    background-image: url("http://lorempixel.com/output/sports-h-c-1-480-5.jpg");
    background-repeat: repeat;
  }
}
@media (min-width: 800px) {
  #image {
    background-image: url("http://lorempixel.com/output/sports-h-c-1-480-6.jpg");
    background-repeat: repeat;
  }
}
@media (min-width: 1200px) {
  #image {
    background-image: url("http://lorempixel.com/output/sports-h-c-1-480-7.jpg");
    background-repeat: repeat;
  }
}

#image img{
  width:80vw;
  height:auto;
  max-width:1200px;
}

html：

<html>

<div id="image" class="fluid-container">
  <center>
    <picture>
        <source media="(max-width: 600px)" srcset="image1.png">
        <source media="(min-width: 600px) and (max-width : 800px)" srcset="image2.jpg">
        <source media="(min-width: 800px) and (max-width : 1200px)" srcset="image3.png">
        <source media="(min-width: 1200px)" srcset="image4.jpg">
        <img src="original_image.jpg">
    </picture>
  </center> 
</div>

请注意，使用此示例，original_image.jpg将仅显示在旧浏览器上。它将始终在Chrome v38以上的浏览器上覆盖

Answer 2

如果你的1px图像是单色的，你可以用bg-color替换它们。代码已更新为使用四个视口这是一个使用Bootstrap4和Flexbox的建议，它还可以处理垂直对齐和多余的填充。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>center image</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid">
      <div class="d-inline d-md-none"> <!-- Small viewports -->
        <div class="row" style="height: calc(50vh - 150px)">
          <!-- Extra row to vertical align the 'image row' -->
        </div>
        <div class="row d-flex p-2 1pix" style="height: 300px; margin: 0 -15px; background-image: url('1px_sm.png'); background-repeat: repeat;">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <img src="320px.png">
          </div>
        </div>
      </div>
      <div class="d-none d-md-inline d-lg-none"> <!-- Medium viewports -->
        <div class="row" style="height: calc(50vh - 200px)">
        <!-- Extra row to vertical align the 'image row' -->
        </div>
        <div class="row d-flex p-2 1pix" style="height: 400px; margin: 0 -15px; background-image: url('1px_md.png'); background-repeat: repeat;">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <img src="480px.png">
          </div>
        </div>
      </div>
      <div class="d-none d-lg-inline d-xl-none"> <!-- Large viewports -->
        <div class="row" style="height: calc(50vh - 250px)">
          <!-- Extra row to vertical align the 'image row' -->
        </div>
        <div class="row d-flex p-2 1pix" style="height: 500px; margin: 0 -15px; background-image: url('1px_lg.png'); background-repeat: repeat;">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <img src="800px.png">
          </div>
        </div>
      </div>
      <div class="d-none d-xl-inline"> <!-- XL viewports -->
        <div class="row" style="height: calc(50vh - 300px)">
          <!-- Extra row to vertical align the 'image row' -->
        </div>
        <div class="row d-flex p-2 1pix" style="height: 600px; margin: 0 -15px; background-image: url('1px_xl.png'); background-repeat: repeat;">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <img src="1200px.png">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

这将为您提供此结果https://github.com/jnfaerch/4images/blob/master/StackOverflow.mkv

请注意，Bootstrap4中正确的类是'container-fluid'（不是'fluid-container'）

如果使用Bootstrap 4，您可以根据此类媒体“切换”主图像

<img src="150px.png" class="d-block d-md-none">
<img src="300px.png" class="d-none d-md-block">

请参阅文档https://getbootstrap.com/docs/4.0/utilities/display/

正确使用媒体视口的图像与背景

2 个答案: