CSS - 如何制作响应式图像 [英] CSS - how to make responsive images

问题描述

我刚刚涉足响应式网页设计.我正在尝试更改我现有的网站，以便它可以在移动设备和台式机上运行.我一直在查看 Internet 上的一些示例，例如 http://2012.inspireconf.com/.

I've been just dabbling with responsive web design. I'm trying to change my existing site so that it wil work on mobile devices as well as on a desktop. I've been reviewing some examples on the internet such as http://2012.inspireconf.com/.

我的问题是 - 当涉及到图像时......让它们缩放到不同浏览器大小的正确方法是什么?我在我的 css 中尝试了以下测试:

My question this - when it comes to images... what's the proper way to make them scale to different browser sizes? I've tried the following test in my 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 开始.这只是为了给我一个关于正在加载哪个图像文件的视觉队列.当我在桌面上调整浏览器的大小时，我可以看到我的媒体查询正在运行……正在加载不同的图像.

The image files are just simple pictures with different numbers - starting from 1-4. This was just to give me a visual queue as to which image file is being loaded. As I resize my browser on my desktop, i can see that my media queries are working... the different images are being loaded.

但后来让我震惊的是，如果我为一个真实的网站做这件事，这意味着我必须为同一张图片创建 5 个不同的版本！

But then it struck me that if i were doing this for a real site, this would mean that I would have to create 5 different versions of the same picture!

那么正确"的方法是创建一张巨大的图片/图像，然后随着我的进行缩小它吗?意思是，我的 css 应该是这样的:

So is the "proper" way to do this to create one massive picture / image, and then shrink it as I go along? Meaning, should my css look like this instead:

 @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;
}   
 }

我试过这个，但图像似乎没有缩放，但我不确定这是否只是因为我没有正确地创建图像.(我不是平面设计师).

I tried this but the image didn't seem to scale but I'm not sure if it's just because I didn't create the image properly in the first place. (I'm not a graphic designer).

谢谢！

推荐答案

解决方案 1:CSS 媒体查询

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

Solution 1: CSS Media Queries

If you don't care about bandwidth for devices which will match a smaller resolution you could just work with this solution.

没有必要为每个媒体查询覆盖相同的 css 属性.您可以为 .hero-unit 设置边框、边距、填充等一次，所有媒体查询都将从它继承.

It's not necessary to override the same css properties for every media query. You can set border, margin, padding etc. once for .hero-unit and all the media queries will inherit from it.

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

The background-size property has the contain keyword. It scales images to fit in the container. The background image resizes proportionally.

包含:

这个关键字指定背景图片应该被缩放到尽可能大，同时确保其尺寸较小大于或等于背景的相应尺寸定位区域.

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 属性.

Depending on the kind of images your're dealing with you could also try to experiment with the cover keyword of background-size 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/

I also set up a working demo for you here http://jsfiddle.net/qBuzR/5/

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

If you care about bandwidth you should resize the photos on the server side depending on the resolution the clients will request.

有一个名为 Adaptive Images 的库，它在服务器端对我来说非常适合 PHP.我想你可以找到你需要的任何语言的库.

There is a library called Adaptive Images which works quite good with PHP on the server side for me. I guess you can find libraries for any language you need.

如果您懒得设置，可以尝试使用 mobify.com API 等第三方服务.换句话说，我将其称为调整大小即服务".

If you're lazy to setup you could try a third party service like mobify.com API. In other words I would call it Resizing-as-a-Service.

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

此 API 调用将图像转换为图像格式 JPG，质量级别为 80%，最大高度和宽度为 100 像素.

This API call transforms the image to image format JPG with quality level of 80% at maximum height and width of 100px.

这篇关于CSS - 如何制作响应式图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！