[让CSS更规范]流体和弹性图像

摘自《精通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元素的扩展或收缩，图像和文本段落也会扩展或收缩，从而保持视觉上的平衡（见下图）。但是，在符合标准的浏览器上，图像不会超过它的实际尺寸。