CSS背景图像的简单响应

时间:2024-03-09 21:16:53

本文设有很多,最理想的解决方案,响应图像只是其中之一。我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案。

大家都在谈论的的srcset属性和元素,以及服务器端的技术,如响应性的Web设计+服务器端组件(RESS)如新的HTML5标准,得出的结论是简单,静态的,你会原谅网站不能支持响应的图像。这一结论可能为时过早,但是。其实,有一个简单的,简单的方法来提供响应的图像,支持所有当今的Web浏览器:CSS背景图像。

然而,这种方法有一定的局限性,并在所有情况下,这是行不通的。但是,如果你的要求并不复杂,如果你愿意做出额外的努力,以确保您的图像访问,CSS背景图像可能是你所需要的。

在这篇文章中,我们将着眼于CSS背景办法在以下几个步骤:

首先,我们要检讨的目标和要求,为响应图像。

然后,我们将看到CSS媒体查询如何可以帮助确定我们的用户设备的重要特征。

我们将探讨的关键CSS 背景图像,让我们应对这些特性的属性。

我们将着眼于优化弥补响应集的各个图像的战略。

我们将研究这种方法的局限性,在许多情况下,也有简单的技术来克服它们。

最后,我们将介绍这种方法的问题,还没有解决方法。

注:这种方法需要明确的控制您的网站的样式表,以及它的HTML标记。如果您的网站依赖于一个内容管理系统(CMS),你可能没有足够的控制这些方面的网站。

*响应图像

响应图像响应的Web设计(RWD),设计由伊桑马科特战略,以应对惊人的普及,移动设备浏览网页的重要组成部分。伊桑认识,以前的最佳实践方案-为不同类型的设备开发单独的网站-根本无法应付各种惊人的设备,网络用户可能采用访问我们的网站建设。

RWD采取完全不同的方法:创建一个单一的网站,但该网站的识别和应对它的上下文。如果用户有一个宽屏幕的桌面浏览器,例如,允许网站内容分布在多个列。然而,在智能手机上重新排列的内容局限于单个列。

在许多情况下,这就是停止响应的设计 - 简单的调整布局和演示。如果这一切,但我们认为,我们没有履行响应式设计的目标,我们卖我们的用户短。

真正响应用户的情况下,需要考虑各方面的经验,设计通常包括图像。对于现实生活中的例子,考虑一个网站如contfont.net。,单页网站,有一个主要的形象和一组典型的HTML,样式表,字体,和JavaScript文件。

该网站看起来很华丽的超高分辨率显示器的电脑上,因为它包括一个高分辨率版本的主要图像。交付该图像文件不便宜,但其1940×1229像素使图像压缩后大小为446 KB。

该网站可以为所有用户使用相同的图像文件,而不妥协的视觉体验。较小的设备,如智能手机上的Web浏览器会调整它的大小以适合显示。虽然这种做法会保持网站的视觉吸引力,整体用户体验将受到显着。

在iPhone上,290×183像素的图像大小为18 KB到452 KB,1940×1229像素的图像在MacBook Pro上看起来相同。

在iPhone上,290×183像素的图像大小为18 KB,452 KB,1940×1229像素的图像在MacBook Pro上的大图看起来相同。

用户浏览网站上说,上一代的智能手机是什么意思?对于用户,290×183像素图像的大小为18 KB,看起来较大的版本相同。没有一个负责任的形象的方法,该网站将强制用户下载一个额外的429 KB的数据,完全是浪费。这多余的不仅仅是学术上的,它具有重大影响网站的加载时间。智能手机用户可能访问的网站超过2 Mb / s的一个典型的3G连接。未能提供一个负责任的形象,增加了加载时间从1.3秒到3秒,明显超过一倍!

原图在3G网络上加载需要3.0秒,1.3秒为一个负责任的形象。

原图需要3.0秒来加载在3G网络上,而1.3秒为一个负责任的形象。大图。

一个负责任的首要目标图像的方法很简单:只提供用户的设备实际上可以使用的像素。

识别用户的上下文

如果我们的网站去应对我们的用户的情况下,我们需要一种方法来标识这方面。今天,CSS提供最有效的方式来区分不同的设备。CSS为我们提供了两个关键问题的答案:什么是用户的显示器的大小?显示支持视网膜式图像?

CSS工具,为我们提供了这个信息是一个媒体查询。媒体查询定义一组CSS样式属性仅适用于具有特殊品质的设备。本来,媒体查询是有限的媒体类型。其中盲人点字(盲文触觉反馈装置),语音(语音合成),TTY(设备等宽字体,如电传打字机)和TV(电视类型的设备,例如CSS规范中定义了大量分辨率低和没有滚动)。目前,只有两种媒体类型,大多数浏览器都支持打印(印刷,分页材料)和屏幕(电脑屏幕)。

扩大了使用CSS3媒体查询,但是,通过让样式表来指定特定功能的设备以及媒体类型。的功能可以包括在屏幕上的设备的情况下,显示的许多特征,包括其宽度,方向,分辨率和像素比例。这些功能提供的信息,我们需要选择一个合适的响应图像。

这里媒体查询如何可以帮助我们解决了上一节的窘境。作为一个例子,一个15英寸的MacBook Pro有一个屏幕宽度为1440像素(忽略的那一刻Retina显示屏选项)。要确定适用于屏幕大小(大)的样式,我们可以写我们的样式表:

@media only screen and (min-width: 1440px){
/* styles for MacBook Pro-sized screens and larger */
}

该块中定义的样式将只适用于当用户访问的网页,使用的设备的屏幕大小为1440像素。有一个问题,虽然。媒体屏幕尺寸并不适用于设备的硬件,而是适用于Web浏览器的视口。视口是在浏览器窗口的大小减去任何浏览器中的铬,如工具栏。

除非用户在全屏模式下浏览,浏览器窗口会略小于1440像素宽。因此,对于这种更常见的情形,我们可能要重写样式表位。1200像素或许是比较现实的。

@media only screen and (min-width: 1200px){
/* styles for wide screens */
}

媒体查询有两部分。第一部分,只有屏幕,显示样式不应适用于页面的印刷本或其他非标设备。(唯一的关键字没有实际影响的媒体查询,它是有严格的真的老的浏览器不支持媒体功能,因为这些浏览器不理解唯一的语法,他们会简单地忽略整个块样式。查询,最小宽度:1200像素)的第二部分给出了屏幕的最小宽度的样式将被应用。和连接这些部件是指申请样式,都必须是真实的。

我们可以使用类似的技术来定义样式人像模式的智能手机。

@media only screen and (max-width: 320px){
/* styles for narrow screens */
}

在这种情况下,我们可以继续前进,在查询中使用的实际设备的屏幕尺寸。智能手机上的Web浏览器总是全屏宽度。

最小宽度和最大宽度功能规格,很容易确定用户的设备的宽度。不幸的是,识别Retina显示屏是不是很简单的。不同的浏览器使用不同的语法这个功能,因此我们必须求助于厂商的前缀。为了使事情稍微差一些,许多版本的Firefox中存在一个bug,在他们的语法,所以我们需要同时使用固定和Mozilla浏览器中的一个“破”的语法。截至目前,视网膜品质显示器看起来像下面推荐的查询。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {/* styles for Retina-type displays */
}

最终,浏览器都将支持标准的每像素点符号(DPPX),并从我们的样式表,我们可以删除供应商前缀。

CSS background-image属性

如果CSS可以可靠地识别用户的情况下,你可能会认为它会很容易支持响应的图像。似乎是合乎逻辑的方法可能会是我们不希望下载这些图像设置显示:无。下面是一个试图严格基于屏幕尺寸。(我们正在为简洁起见,省略视网膜考虑。)

只有屏幕和


<html lang="en">
<head>
<meta charset="utf-8">
<title>title>
<style>
  img.smallscreen { display: none; }
  @media only screen and (max-width: 320px) {
   img { 
    display: none; 
   }
   img.smallscreen { 
    display: inline; 
   }
  }
  style>
head>
<body>
<img src="largeimage.jpg">
  body>
html>

调整您的浏览器窗口的大小,直到图像宽度看起来差令人无法接受。该屏幕的宽度将是你的断点。大图。

当你找到的第一个断点,使用图形程序来创建一个新的测试图像,大小从原来的源。新的测试图像中找到下一个断点,并重复上述过程继续下去,直到你已经达到了您的网站将支持的最大视区宽度。

在这一点上,你有你的图像断点和一组图像匹配。Retina显示屏,创建额外的双分辨率的图像。这里是的完整列表图像contfont.net网站:

您可以使用此方法在您的网站上为每个图像分开,没有任何理由,所有的图像都有使用相同的断点。然而,如果你的网站有大量的图片,它可能是更有效地使用一些网站的图片,发现一些常见的断点,然后重复这些断点的所有网站上的图像。

克服的局限性

在最简单的情况下,上述步骤都需要支持响应图像。当然,网站很少是简单的,而事实上,有几个步骤,我们可以采取改善的办法。

使图像无障碍

标签支持的ALT属性,提供了一种替代方法,文本的形象描述。这种描述是很重要的,屏幕阅读器的用户访问网站依靠的ALT含量来描述图像。CSS背景图像不的

 

标签,因此没有alt属性,但我们仍然可以使他们视力受损的用户访问。要做到这一点,我们添加了两个额外的属性,我们的标记。

第一个额外的属性,作用,让屏幕的读者都知道,的服务的作用一个 标签,即使它是不明确的标记。第二个属性,咏叹调 ​​标签供应ALT属性中的

 

同样的目的。有了这两个增加,屏幕阅读器可以宣布该元素是一个形象,他们将读取该图像替换文本说明您所提供给他们的用户。

在浏览器中的缩放图像

还有另外一个有用的属性的标签,不支持我们的简单方法:由浏览器自动调整大小和缩放。随着一个标准的

 

,我们可以简单地设置包含元素的百分比宽度,浏览器会自动计算的宽度和比例尺度的高度。例如,考虑下面的代码片段显示image.jpg的,具有天然的尺寸为600×300像素的图像文件。

浏览器会自动缩放图像到含,减少其宽度从600至400像素。它还保留了图像的纵横比,在同一时间从300到200像素缩放图像的高度。其结果是一个无失真的图像,非常适合在页面上。

第一格雷迪Kuhnline描述方法,我们就可以达到同样的效果,一个现代浏览器的CSS背景图像。(警告:本款介绍的方法不工作版本的Internet Explorer 8及以下,因为这些浏览器不支持必要的CSS属性。)

最简单的一部分,以解决正在扩大的宽度。与的

 

标签,我们可以设置固定宽度内的 我们的元素,我们只是必须明确地表明,背景应该填补这一HTML标记看起来没有很大的不同。

我们要结合几个CSS属性来设置的宽度,让他们一次一个:

#images元素inline-block的设置显示属性。没有这个属性,CSS将作为内嵌显示的元素,我们将无法给它一个宽度或(在一分钟内)的高度。

该元素的宽度设置为100% ,所以我们的形象的含有的的填充。字体大小和行高属性设置为0,这样的跨度内的任何内容做没有考虑到它的大小。

设置垂直对齐物业中间垂直居中的图像元素,设置背景大小的属性为100%,所以我们的形象充满图像元素。设置背景位置属性50%50% ,在图像元素的背景图像对齐。设置背景重复属性不重复,以防止浏览器从水平或垂直平铺图像。

由此产生的CSS样式设置的图像元素(元素的“形象”与ID)。

#image {

display: inline-block;

width: 100%;

font-size: 0;

line-height: 0;

vertical-align: middle;

background-size: 100%;

background-position: 50% 50%;

background-repeat: no-repeat;

background-image: url(image.jpg);

}

这些步骤使图像的宽度照顾,但我们还没有攻克的高度。在上面的标记或样式告诉任何浏览器中的图像元素的高度。因此,它会默认它的自然高度,唉,零,因为没有实际内容的。幸运的是,我们可以解决这个问题有一些小的增加。

首先,我们需要添加一个额外的元素对我们的标记。这种额外的元件被放置于图像元素。

现在我们定义一些样式属性此内的。设置其显示属性块,所以将有一个高度和宽度。其高度设置为0,因为它不具有任何实际的内容。添加填充顶物业的形象的高度与宽度的比例等于指定百分比。

这最后一步是关键。即使继承没有从它的内容,填充顶力的元素占用的垂直空间高度。此外,填充顶接受百分比值的百分比是相对于元素的宽度。我们的形象是970×614像素,所以我们使用的是百分比值(614÷970)×100%,63.3%。现在,浏览器将确保我们的形象保持其纵横比,因为它的放大或缩小。

现在一起所有

要看到所有这些组件是如何结合在一起的,这是我们作为一个例子的contfont.net网站的代码。首先是主要包括网站形象的HTML标记。

样式表定义的属性,使图像按比例增减。

.hero #cafe {
width:100%;
display: inline-block;
vertical-align: middle;
font:0/0 serif;
text-shadow: none;
color: transparent;
background-size:100%;
background-position:50%50%;
background-repeat: no-repeat;
}
.hero #cafe .inner {
padding-top:63.35%;/* height/width of image */
display: block;
height:0;
}

最后,媒体查询了一套基于用户的上下文中挑选适当的图像文件。(下面的例子为简洁起见,省略了供应商的前缀)。

/* default screen, non-retina */
.hero #cafe {background-image:url("../img/candc970.jpg");}

@media only screen and (max-width: 320px){
/* Small screen, non-retina */
.hero #cafe {background-image:url("../img/candc290.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.hero #cafe {background-image:url("../img/candc290@2x.jpg");}
}
@media only screen and (min-width: 321px) and (max-width: 538px){
/* Medium screen, non-retina */
.hero #cafe {background-image:url("../img/candc538.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, retina */
.hero #cafe {background-image:url("../img/candc538@2x.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
/* Large screen, retina */
.hero #cafe {background-image:url("../img/candc970@2x.jpg");}
}

潜在的问题

CSS背景图像是一个方便的方式来提供响应的图像,但是这种方法是不完美的。在一个基本的层面上,它违反了现代Web标准的基本理念之一 - 内容与表示分离。高级版本的做法也遭受浏览器的兼容性问题,以及方法不解决一些更深层次的问题,一般的响应图像。

风格和内容的分离

+ CSS开发专门分开从内容风格。在现代网络,HTML页面提供了一个网站的所有内容,而样式表只影响外观内容。不应该定义样式表的内容本身。当然,风格和内容之间的分离已被违反有点与CSS的内容和内容后的属性,但这些属性通常用来增强的外观(例如,通过添加一个图标,一个元素)。

用CSS指定主网站的图片,是一个完全不同的水平。通过指定的主要内容,而不是HTML与CSS,使我们的网站更难排除故障,使他们更难以维持,我们创建系统障碍,可能会尝试自动解析我们的网站。

不幸的是,确实是有这个问题没有得到解决。如果严格分离的风格和内容对你很重要,那么你就必须考虑以其他方式响应图像。

浏览器支持缩放图像

如上所述,加入缩放图像的基本方法的增强,我们将无法在Internet Explorer 8及以下工作。如srcset标准化的方法可能是向后兼容的浏览器,但是,当然,本身srcset是不是当今任何主流浏览器上。

如果你需要支持IE8现在,你可能会考虑IE8中,指定固定图像缩放图像的大小,而不是创建一个单独的样式表。当然,你要包括该样式表,使其他浏览器IE条件注释内不会看到它。

用户上下文的实际问题

也许这种做法最根本的问题是一个问题,一般的响应图像。我们正在使用的屏幕的宽度和像素密度来确定用户的上下文,但目前尚不清楚,这样的做法总是合适的。举个例子,通过智能手机的Wi-Fi热点的笔记本用户访问Web。

通过智能手机的Wi-Fi热点访问Web。

该用户的Web浏览器将显示所有特点,高密度,宽屏幕的设备,和一个负责任的网站将提供大尺寸,高清晰度的图像。如果不这样做会显得可怜我们的用户的显示屏上,但这些图像可能要花很长的时间来加载过的无线网络。他们可以大大提高网站的加载时间,对他们的无线账单,他们最终可能会花费我们的用户真正的金钱。如果可以选择,他们可能更喜欢较低分辨率的图像。

事实证明,这个问题的解决是一个很艰难的一个聪明的人肯定是在Web社区讨论,但到目前为止,很少有一个切实可行的解决方案上达成共识。现在,基于CSS的情况下发现是最好的技术。

本文由红蜘蛛网络联盟(www.rswebun.com)编译,原文地址:http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/