如何将基于％的图像添加到CSS？ （用于流体布局）

Question

好吧，我想要通过CSS选择的图像是基于流体的，但是，这是我遇到的问题。

这是我想在我的脑子里，我所要做的，但是，这是行不通的：

#image { background-image:pic.jpg; height:100%; width:100%; } 

但是，你不能有此标记使用“高度：100％;” ，对吗？您必须将其设置为像素宽度。但是如果我想让它变得流畅......那么我不能将它设置为像素宽度，对吗？

是否有另一种方法可以做到这一点？谢谢。

Answer 1

如果你做这种方式将是液体：

HTML：

<img src="http://news.bbcimg.co.uk/media/images/62777000/jpg/_62777247_62777242.jpg" alt="" />

CSS：

img { width: 100%; }​

http://jsfiddle.net/7hMbQ/1/

或者，如果你想伸展宽度和高度为100％试试这个（但比例不会是正确的）：

http://jsfiddle.net/7hMbQ/3/

Answer 2

如果你的意思是在我想它的意义“流体”（响应式设计类的“流体”），然后设置“最大宽度”为“100％”应该确保图像永远溢出通过其容器（或换句话说，超过100％的宽度）。

img { max-width: 100%; } 

编辑：如果您的问题使高度保持纵横比，只是不指定height属性，或者如果你需要覆盖的属性设置，高度设置为auto太（重要！） ：

img { max-width: 100%; height: auto !important; }