6

对于网站上的每个帖子，都会有一个标题图像。该图像的宽度为100vw，高度为300px。我想通过标签的srcset属性img或成熟的picture元素提供此图像的多个版本（此时不确定哪个版本，因此这个问题）。

这样做会很容易使用srcset属性：

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

当我想考虑不同的设备像素比率时，就会出现问题。首先，假设我拥有上面列出的所有图像的2x版本。3xsrcset

假设我有一部2x具有320px宽视口的手机（例如 iPhone 5）。我希望浏览器加载xs_2x.jpg. 同样，假设我有一个1x带宽屏显示器的桌面。我希望浏览器加载lg.jpg.

但是现在假设我有一部更大的手机，一个具有3x,414px宽视口的手机（即 iPhone 6 Plus）。在这种情况下，我希望我的浏览器能够加载sm_3x.jpg. 但是，我的浏览器可能会加载sm_2x.jpg，因为（1536 像素）的宽度比（2304 像素）sm_2x.jpg的宽度更接近手机的宽度（1242 像素）。sm_3x.jpg这将导致设备上的图像不300px高，从而打破网站的要求。

如何实现动态宽度、静态高度、具有 DPR 意识的响应式图像？

4

3 回答 3

0 
background-size: 100% cover;

这应该有效。

编辑：这会起作用的简单原因是因为你可以单独在 CSS 中完成它。background-size 将覆盖可用空间见文章：http ://davidwalsh.name/background-size

创建一个 css 类：.img-resp { background-size: 100% cover; }然后将其应用于您的元素。

于 2015-02-05T17:42:47.497 回答
0

您应该考虑到 JPEG 图像分辨率 (DPI) 对屏幕没有意义。这里的主要内容是像素的总水平/垂直计数。

因此，图像的 1x、2x 和 3x 版本将是（根据设备宽度！）： 设备 - 图像尺寸表

所以 1x 显示器和 3x iPhone 需要相同的图像（1920 x 300px），它在 srcset 中的代码是img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

注意：如果您在屏幕宽度为 320 像素且为 1 倍（非视网膜）显示器的设备上，则应使用宽度为 320 像素的图像。

这里只有像素的总数很重要。

于 2015-02-11T07:41:57.510 回答
-1

我没有得到你的确切要求。

我想给你我的代码来尝试你的要求。试试这个代码：

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title>Responsive Images</title>
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
      </script>
    </head>
    <body>

      <div class= "container-fluid">
        <div class="row">

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
   class="img-responsive">
          <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> -->
        </div>
      </div>
        </body>
        </html>
于 2015-02-10T03:04:24.147 回答