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 设置一次边框、边距、填充等，所有媒体查询都将从它继承。

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

包含:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

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

封面:

This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

示例:

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，质量级别为 80%，最大高度和宽度为 100 像素。