CSS-如何制作自适应图像

Question

我只是涉足响应式网页设计。 我正在尝试更改现有站点，以便它既可以在移动设备上也可以在台式机上运行。 我一直在审查互联网上的一些示例，例如http://2012.inspireconf.com/ 。

我的问题是-关于图片...什么使它们缩放到不同的浏览器大小的正确方法是什么？ 我在CSS中尝试了以下测试：

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/2.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/3.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/4.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

图像文件只是具有不同编号的简单图片-从1-4开始。 这只是为了给我一个可视队列，以了解正在加载哪个图像文件。 在桌面上调整浏览器大小时，我可以看到媒体查询正在运行...正在加载不同的图像。

但是，令我惊讶的是，如果我要在一个真实的网站上这样做，那意味着我将不得不为同一张图片创建5个不同的版本！

那么，执行此操作的“适当”方法是否是创建一张大图片/图像，然后在进行时缩小它？ 意思是，我的css应该看起来像这样：

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 40% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/1.jpg") 60% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/1.jpg") 80% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

我尝试了一下，但是图像似乎没有缩放，但是我不确定是否只是因为我一开始没有正确创建图像。 （我不是平面设计师）。

谢谢！

Answer 1

解决方案1：CSS媒体查询

如果您不关心匹配较小分辨率的设备的带宽，则可以使用此解决方案。

不必为每个媒体查询覆盖相同的CSS属性。 您可以为.hero-unit设置一次border，margin，padding等，所有媒体查询都将从该继承。

background-size属性具有contains关键字。 它缩放图像以适合容器。 背景图像按比例调整大小。

包含：

此关键字指定背景图像应缩放为尽可能大，同时确保其尺寸均小于或等于背景定位区域的相应尺寸。

根据您要处理的图像类型，您还可以尝试使用background-size属性的cover关键字进行试验。

覆盖：

此关键字指定背景图像应缩放到尽可能小，同时确保其尺寸都大于或等于背景定位区域的相应尺寸。

例：

background-size: contain;

我还在这里http://jsfiddle.net/qBuzR/5/为您设置了一个工作演示

---

解决方案2：调整Javascript和服务器端大小（自行托管）

如果您关心带宽，则应根据客户端要求的分辨率在服务器端调整照片的大小。

对于我来说，有一个名为Adaptive Images的库可以很好地在服务器端与PHP配合使用。 我想您可以找到所需语言的库。

---

解决方案3：Javascript和服务器端大小调整（第三方）

如果您懒于设置，则可以尝试使用第三方服务，例如mobify.com API 。 换句话说，我将其称为“服务调整大小”。

例：

http://ir0.mobify.com/jpg80/100/100/http://farm4.staticflickr.com/3113/3831295511_2c004d9059_o.jpg

此API调用将图像转换为图像格式JPG，最大高度和宽度为100px时，其质量等级为80％。