原文: Create Resizable Images With CSS

I'm a big fan of layouts that still work if a user increases their browser's text size. However, I was wondering what it would be like if any images resized along with the text rather than staying constant in size. Would everything seem more in proportion?

Not having seen an example of this before, I thought I'd see if I could come up with a solution. If you're impatient, here's the example.

I didn't want to resize the image itself because that would cause problems with pixellation. My preferred solution was to take a large image, hide most of it at medium text size and only reveal the rest as the text size was increased.

To do this I used a large image and wrapped it in a div which was sized in ems.

As the browser's text size increased, so did the size of the div, revealing more of the image. The challenge was to make the image look good when it was exposed in varying proportions.

Method One uses a background image. The main disadvantage of this method (other than the fact that the image is taken out of the content) is that I couldn't find a way to keep the image in the center of the div.

So, as the div increases in size, the image no longer remains centered within it.

Here's the 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;
}

Method Two — my preferred solution — places the image inside the div in the HTML. This enables it to be centered within the div (thanks to Jonathan Snook for helping out with the CSS).

Here's the 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;
}

So there you have it. I don't know how useful this technique is, but it was fun working it out.

译文: 用CSS制作自适应的背景图

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

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

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

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

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

这里是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;
}

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