Question

以下CSS样式规定，如果将400像素宽的图像放置在一个400像素的div中，则该图像宽200像素...

img { width: 50%; }

但是有没有一种风格可以让图像显示为自己的一半大小，无论它在哪个容器中？

我问这个是因为我有很多漂浮的图像切片可以使用。例如，假设您拍摄了400像素宽的恐龙图像并将其切成水平四分之一。四个结果图像可能测量350px，300px，280px和200px。如果我想在移动设备中显示它们，我必须为每个部分创建单独的样式，将宽度设置为原始宽度的一半，原始宽度的三分之一，或者其他任何内容。

所以我只是想知道是否有某种风格我可以自动将每张图片减少三分之一，等等。谢谢。

Answer 1

但是有没有一种风格可以让图像以自己的一半大小显示，而不管它是什么容器？

我想不出图像本身的一个简单属性 - 但是如果你将它们放在一个display:inline-block的元素中，你就会得到你想要的东西：

<div style="width:400px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:600px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:800px"><span><img src="http://placehold.it/400x200"></span></div>

div { background:red; }
span { display:inline-block; }
img { width:50%; }

http://jsfiddle.net/H8AQY/

CSS能否以原始大小的分数显示图像？

1 个答案: