[让CSS更规范]流体和弹性图像
2009-07-02 10:23
288 查看
摘自《精通CSS:高级Web标准解决方案》
如果选择使用流体或弹性布局,那么固定宽度的图像就会对设计产生强烈的影响。当布局的宽度减小时,图像会移动,可能相互产生消极影响。图像会以自然的最小宽度显示,从而防止某些元素的尺寸减小。有些图像会超出包含它们的元素,从而破坏精心调整过的设计。增加布局的宽度也会产生戏剧性的结果,形成空隙过大、不平衡的设计。但是不要担心,有几个办法可以避免这些问题。
对于需要跨越大区域的图像,比如站点页眉或品牌区域中的图像,可以考虑使用背景图像而不是图像元素。随着branding元素的伸缩,背景图像露出来的部分会变化:
#branding {
height: 171px;
background: url(images/branding.png) no-repeat left top;
}
如果图像需要作为页面上的图像元素,那么将容器元素的宽度设置为100%并且将overflow属性设计为hidden。这样的话,图像会被截短,使它适合branding元素,而不会随着布局伸缩:
#branding {
width: 100%;
overflow: hidden;
}
对于常规内容图像,可能希望它们垂直和水平伸缩以避免剪切。为此,可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度,并且添加与图像宽度相同的max-width以避免像素失真(pixelization)。
记住,max-width只在比较现代的浏览器(比如Safari和Firefox)中起作用。如果担心老式浏览器中的图像像素失真问题,那么将图像设置为需要的尺寸。
例如,假设希望创建一种新闻样式,在左边是窄的图像列,右边是比较大的文本列。图像的宽度需要大约是包含它的框的四分之一,文本占据余下的空间。为此,只需将图像的宽度设置为25%,然后将max-width设置为图像的尺寸(在这个示例中是200像素宽):
.news img {
width: 25%;
max-width: 200px;
float: left;
padding: 2%;
}
.news p {
width: 68%;
float: right;
padding: 2% 2% 2% 0;
}
随着news元素的扩展或收缩,图像和文本段落也会扩展或收缩,从而保持视觉上的平衡(见下图)。但是,在符合标准的浏览器上,图像不会超过它的实际尺寸。
如果选择使用流体或弹性布局,那么固定宽度的图像就会对设计产生强烈的影响。当布局的宽度减小时,图像会移动,可能相互产生消极影响。图像会以自然的最小宽度显示,从而防止某些元素的尺寸减小。有些图像会超出包含它们的元素,从而破坏精心调整过的设计。增加布局的宽度也会产生戏剧性的结果,形成空隙过大、不平衡的设计。但是不要担心,有几个办法可以避免这些问题。
对于需要跨越大区域的图像,比如站点页眉或品牌区域中的图像,可以考虑使用背景图像而不是图像元素。随着branding元素的伸缩,背景图像露出来的部分会变化:
#branding {
height: 171px;
background: url(images/branding.png) no-repeat left top;
}
如果图像需要作为页面上的图像元素,那么将容器元素的宽度设置为100%并且将overflow属性设计为hidden。这样的话,图像会被截短,使它适合branding元素,而不会随着布局伸缩:
#branding {
width: 100%;
overflow: hidden;
}
对于常规内容图像,可能希望它们垂直和水平伸缩以避免剪切。为此,可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度,并且添加与图像宽度相同的max-width以避免像素失真(pixelization)。
记住,max-width只在比较现代的浏览器(比如Safari和Firefox)中起作用。如果担心老式浏览器中的图像像素失真问题,那么将图像设置为需要的尺寸。
例如,假设希望创建一种新闻样式,在左边是窄的图像列,右边是比较大的文本列。图像的宽度需要大约是包含它的框的四分之一,文本占据余下的空间。为此,只需将图像的宽度设置为25%,然后将max-width设置为图像的尺寸(在这个示例中是200像素宽):
.news img {
width: 25%;
max-width: 200px;
float: left;
padding: 2%;
}
.news p {
width: 68%;
float: right;
padding: 2% 2% 2% 0;
}
随着news元素的扩展或收缩,图像和文本段落也会扩展或收缩,从而保持视觉上的平衡(见下图)。但是,在符合标准的浏览器上,图像不会超过它的实际尺寸。
相关文章推荐
- [让CSS更规范]弹性-流体混合布局
- [让CSS更规范]弹性布局
- [让CSS更规范]流体布局
- HTML&CSS基础篇之九:图像
- 用css sprites(图像拼合技术)优化css加快网站速度[转]
- css 之 flex 弹性布局浅浅的理解
- CSS规范 - 分类方法
- 推荐大家使用的CSS书写规范、顺序
- CSS命名规范
- CSS命名规范
- Css代码标准规范-注释
- 前端 HTML-CSS 规范
- 网站DIV+css弹性+固宽布局案例
- CSS书写规范、顺序
- 前端开发进阶:推荐的 CSS 书写规范
- CSS书写规范、顺序
- web前端代码规范——css代码规范
- CSS命名规范——BEM思想(非常赞的规范)
- 【html、css、js注释】规范用法
- css em弹性布局