CSS可以以原始大小的一小部分显示图像吗？

下面的CSS风格决定了该宽400个像素的图像将显示为宽200个像素，如果它放在一个div测量400个像素...CSS可以以原始大小的一小部分显示图像吗？

img { width: 50%; }

但有一个风格，使图像显示不论其容器的尺寸是其自己的一半大小？

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

所以我只是想知道是否有某种我可以使用的风格，会自动减少每个图像三分之一，等等。谢谢。

来源

2014-03-27 David Blomstrom

你的切片是否有类似的宽度，高度还是有点难题？如果它们全都具有相同的高度或相同的宽度，那么它们可以很容易地重新缩放，从而使单个容器的宽度或高度达到100％。堆放它们会：display：block; +宽度：100％;将它们并排放置，这将是浮动+高度：100％; 。它将采取容器大小 –

好的提示，但它更多的是一个难题。但是，将来我将不得不尝试使切片高度相同。我不知道你可以通过这样的高度来缩放图像。 –

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

我想不出一个简单的属性对图像本身的 - 但是如果你将它们放置在一个元素与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/

来源

2014-03-28 00:12:04 CBroe

CSS可以以原始大小的一小部分显示图像吗？

回答

相关问题