我非常注重版面问题。我经常思考能不能有一种方法，可以根据文本大小来调整图像，这样看起来页面会更相称。

因为找不到这方面的资料，所以只能自己想办法喽！如果你有耐心的话，可以看看下面的例子。

我不想去调整图像本身的大小，因为那样图像可能会变形。我比较偏爱的解决方法就是找一张比较大的图片，将图片的大部分按照中等文本的大小先隐藏起来，只显示剩下的部分。这样如果文本内容增加，那么图片也可以随着变大。

我使用了一张很大的图片，把它放在层里。随着文本内容的增加，层也会增大，这样就可以显示图片更多的部分。最重要的一点就是，无论按照何种比例调整图像，都要让图像看起来很美观。

方法一就是使用一个背景图像。这种方法的缺点就是无法让图像在层的中央（因为图像和文本内容没有独立分层）。所以，如果层增大，图像就不会在层的中间了。

这里是HTML:
<div class="resize"></div>
And the CSS:
.resize {
  background: url(image.jpg) -130px -140px no-repeat;
  border: 3px double #fff;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  width: 12em;
}

方法二－我比较常用的办法－将图像放在HTML中的层里。这可以让图像在层的中间（借鉴了Jonathan Snook的方法）……

这里是HTML:
<div class="resize2"><img src="image.jpg" alt="" /></div>
And the CSS:
.resize2 {
  border: 3px double #333;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  overflow: hidden;
  width: 12em;
}

.resize2 img {
  margin: -220px 0 0 -210px;
  padding: 6em 0 0 6em;
}

现在你学会了吧。这个过程真的很有趣！