Asp.net：用于不同屏幕分辨率的可变图像源

Question

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

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

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

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

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

对于滑块内的大背景图像，会导致过多的服务器负载，时间和金钱。

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）