html - Asp.net:不同屏幕分辨率的可变图像源

Question

有没有办法为不同的屏幕分辨率选择不同的图像源？

类似于媒体查询，但仅适用于图像

<img src="@<variable source for variable screen res.>@" />

节省一些服务器带宽并增加移动设备或小屏幕的加载时间。

我有一个用于高清屏幕的 1800x900 图像，需要为另一个屏幕选择 900x300 版本。

对于 slider 内的那些大背景图像，会导致过多的服务器负载以及时间和金钱。

Answer 1

使用 HTML:

(来源:http://css-tricks.com/on-responsive-images/)

<picture alt="description of image">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

这是 HTML 5 的一个非常新的实验性功能，请参阅 http://caniuse.com/#feat=picture

使用 JavaScript:

有几个插件可以解决这个问题:

• PictureFill
• jQueryPicture
• Foresight.Js

使用CSS:

与 <div id="picture"></div>作为 IMG 的替代品元素:

#picture {
     background-repeat: no-repeat;
     background-size: 100%;
}

@media (min-width: 800px) {
   #picture { background-image: url('small.jpg'); width: (SMALL_WIDTH); height: (SMALL_HEIGHT); }
}

@media (min-width: 1200px) {
   #picture { background-image: url('medium.jpg'); width: (MEDIUM_WIDTH); height: (MEDIUM_HEIGHT); }
}

@media (min-width: 1400px) {
   #picture { background-image: url('large.jpg'); width: (LARGE_WIDTH); height: (LARGE_HEIGHT); }
}

使用服务器端解决方案:

• http://squeezr.it/ (PHP)
• http://adaptive-images.com/ (PHP)