基于JavaScript的分辨率为不同设备提供不同尺寸的图像 [英] Serving Different Size Images For Different Devices Based On Resolution Using JavaScript

问题描述

示例：此网站就是一个很好的例子。

EXAMPLE: This website is a very good example.

STEP-1：在一个标签中

• 只需加载页面


• 查看最右列中的任何图片。您将看到它们的分辨率为638x368

• just load the page
• View any image in the far right column. You'll see that they are 638x368 in resolution

第2步：打开新标签页， ...

STEP-2: Open a new tab, and...

• 加载页面并打开Firebug或开发者工具（ F12 ）


• 转到网络（或网络 ）标签


• 调整浏览器大小并重新加载页面


• 再次最大化浏览器窗口


• 查看最右列中的任何图片。你会看到它们的分辨率是356x205

• load the page and open Firebug or Developer Tools (F12)
• go to the Network (or Net) tab
• resize the browser and reload the page
• Maximize the browser window again
• View any image in the far right column. You'll see that they are 356x205 in resolution

显然这是一些JavaScript / jQuery技巧（+其他一些技术），因为如果你检查了最右边一列中的任何图像，你会看到如下代码：

Clearly this is some JavaScript/jQuery trickery (+ some other tech), because if you inspect any of the images in the far right column, you'll see code like this:

<div class="article-img-container">
  <a data-turbo-target="post-slider" href="http://mashable.com/2012/12/27/gdigital-therapy-dog/">
    <span class="_ppf">
      <span data-q="true" data-s="http://rack.2.mshcdn.com/media/.../438c2f93/107/GeriJoy.jpg" data-z="638x368#"></span>
      <span data-q="(min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../46c08de9/107/GeriJoy.jpg" data-z="1276x736#"></span>
      <span data-q="(max-width: 1160px)" data-s="http://rack.2.mshcdn.com/media/.../fa9bdb7b/107/GeriJoy.jpg" data-z="356x205#"></span>
      <span data-q="(max-width: 1160px) and (min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../42ebf99d/107/GeriJoy.jpg" data-z="712x410#"></span>
      <span data-q="(max-width: 480px)" data-s="http://rack.2.mshcdn.com/media/.../948312d1/107/GeriJoy.jpg" data-z="280x157#"></span>
      <span data-q="(max-width: 480px) and (min-resolution: 1.5dppx)" data-s="http://rack.0.mshcdn.com/media/.../da1d8905/107/GeriJoy.jpg" data-z="560x314#"></span>
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzI3L2QyL0dlcmlKb3kuNWYyZWYuanBnCnAJdGh1bWIJNjM4eDM2OCMKZQlqcGc/438c2f93/107/GeriJoy.jpg">
    </span>
  </a>
</div>

...如果你 view-source 的页面。有一个开源的javascript库可以做这样的事吗？

...which doesn't exist if you view-source of the page. Is there an open source javascript library that does something like this?

我们称之为什么？ 自适应图片？

我想问的简单明了的问题是...是否可以向不同的设备提供不同尺寸的图像基于浏览器的视口大小或屏幕分辨率？

The plain and simple question that I want to ask is... is it possible to serve different size images to different devices based on the view-port size of their browser or their screen resolution?

推荐答案

最好的答案是没有javascript就可以实现现在一段时间

The great answer is this has been possible without javascript for a little while now

将来< picture> 元素正是将要使用和需要的元素。它的HTML如下所示

In the future the <picture> element is exactly what will be used and needed. The HTML for it looks like the following

<picture>
    <source srcset="examples/images/large.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/medium.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/small.jpg">

    <img srcset="examples/images/small.jpg" alt="Desciption of image">
</picture>

这与下面的技术基本相同，但写作方式更容易它适用于 img 而不是背景图像。在撰写此答案时，我们可以使用填充填充来使用此格式或 @media 查询

This is essentially the same technique as the one below, but the form of writing it is made easier and it is serves to an img as opposed to a background-image. As of writing this answer, we can use a polyfill to use this format or a @media query

引入的CSS2媒体类型 @media 查询允许我们根据视口尺寸和其他许多内容影响页面的不同样式。这使我们可以服务更大图像仅在需要时才作为背景图像。它的一个使用示例如下：

CSS2 Media Types introduced @media queries which allow us to affect different styles of a page based on the viewport dimensions among many other things. This allows us to serve larger images as background images only if they're needed. An example of its use is the following

.myImg { background-image:url(myurlSmall.png); } /* Start with smallest */

/* Serve larger image only if needed */
@media (min-width:400px) {
    .myImg { background-image:url(myurlMedium.png); }
}
@media (min-width:1200px) {
    .myImg { background-image:url(myurlLarge.png); }
}
/* etc. */

这篇关于基于JavaScript的分辨率为不同设备提供不同尺寸的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！