CSS图像resize本身的百分比？
我正在尝试调整一个img本身的百分比。 例如，我只想通过将图像调整到50％来将图像缩小一半。 但应用width: 50%; 将图像的大小调整为容器元素的50％（例如，可能是<body>的父元素）。
问题是，我可以resize的图像本身的百分比而不使用JavaScript或服务器端？ （我没有图像大小的直接信息）
我很肯定你不能这样做，但我只想看看是否有智能CSS唯一的解决scheme。 谢谢！
我有2个方法给你。
方法1. 在jsFiddle上演示
这种方法只调整图像的大小，而不是DOM中的实际尺寸，调整后的视觉状态位于原始大小中间。
HTML：
<img class="fake" src="example.png" />
CSS：
img { -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ -moz-transform: scale(0.5); /* FF3.5+ */ -ms-transform: scale(0.5); /* IE9 */ -o-transform: scale(0.5); /* Opera 10.5+ */ transform: scale(0.5); /* IE6–IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand'); }
浏览器支持说明：浏览器统计显示内嵌在css 。
方法2. 演示jsFiddle
HTML：
<div id="wrap"> <img class="fake" src="example.png" /> <div id="img_wrap"> <img class="normal" src="example.png" /> </div> </div>
CSS：
#wrap { overflow: hidden; position: relative; float: left; } #wrap img.fake { float: left; visibility: hidden; width: auto; } #img_wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #img_wrap img.normal { width: 50%; }
注意： img.normal和img.fake是相同的图像。
浏览器支持说明：此方法适用于所有浏览器，因为所有的浏览器都支持方法中使用的css属性。
该方法以这种方式工作：
- '#wrap'和'#wrap img.fake'有
flow -
#wrapoverflow: hidden设置#wrap与内部图像相同的尺寸（img.fake） -
img.fake只是img.fake中没有absolute或fix位置的一个元素，不能打破第二步的结果。 -
#img_wrap在#img_wrap有absolute位置，并且扩展到整个元素（#wrap） - 第四步的结果是
#wrap_img与图像尺寸相同。 - 使用
responsive images方法设置width: 50%;img.normal，现在你得到了你的结果。
HTML：
<span> <img src="example.png"/> </span>
CSS：
span { display: inline-block; } img { width: 50%; }
这已经成为使用容器元素方法的最简单的解决scheme之一。
当使用容器元素方法时，这个问题是这个问题的一个变种。 诀窍是让容器元素收缩包装的子图像，所以它将有一个大小相当于未经处理的图像。 因此，当将图像的width属性设置为百分比值时，图像相对于其原始比例被缩放。
一些其他的shrinkwrapping-enable属性和属性值是： float: left/right ， position: fixed和min/max-width ，如链接问题中所述。 每个都有自己的副作用，但display: inline-block将是一个更安全的select。 马特在他的回答中提到了float: left/right ，但他错误地将其归因于overflow: hidden 。
在jsfiddle上演示
编辑： 正如木马提到的 ，你也可以利用新推出的CSS3内在和外在大小调整模块 ：
HTML：
<figure> <img src="example.png"/> </figure>
CSS：
figure { width: intrinsic; } img { width: 50%; }
然而， 并不是所有stream行的浏览器版本在撰写本文时都支持它 。
尝试zoom属性
<img src="..." style="zoom: 0.5" />
编辑：显然，FireFox不支持zoom属性。 你应该使用;
-moz-transform: scale(0.5);
为FireFox。
这实际上是可能的，而且在devise我的第一个大型响应式devise网站时，我意外地发现了这一点。
<div class="wrapper"> <div class="box"> <img src="/logo.png" alt=""> </div> </div> .wrapper { position:relative; overflow:hidden; } .box { float:left; } //Note: 'float:right' would work too .box > img { width:50%; }
overflow：hidden给出了包装的高度和宽度，尽pipe有浮动的内容，而不使用clearfix hack。 然后，您可以使用边距来定位您的内容。 你甚至可以使包装div成为一个内联块。
我认为你是对的，就我所知，纯粹的CSS是不可能的（不是跨浏览器的意思）。
编辑：
好吧，我不喜欢我的回答，所以我感到困惑。 我可能会find一个有趣的想法，可以帮助..也许这是可能的（尽pipe不是最漂亮的事情）：
编辑：testing和工作在Chrome，FF和IE 8和9。 。 它在IE7中不起作用。
jsFiddle这里的例子
HTML：
<div id="img_wrap"> <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/> <div id="rescaled_img_wrap"> <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/> </div> </div>
CSS：
#img_wrap { display: inline-block; position:relative; } #rescaled_img_wrap { width: 50%; } #original_img { display: none; } #rescaled_img { width: 100%; height: 100%; }
function shrinkImage(idOrClass, className, percentShrinkage){ 'use strict'; $(idOrClass+className).each(function(){ var shrunkenWidth=this.naturalWidth; var shrunkenHeight=this.naturalHeight; $(this).height(shrunkenWidth*percentShrinkage); $(this).height(shrunkenHeight*percentShrinkage); }); }; $(document).ready(function(){ 'use strict'; shrinkImage(".","anyClass",.5); //CHANGE THE VALUES HERE ONLY. });
这个解决scheme使用js和jquery，只根据图像属性resize，而不是在父级上。 它可以使用类和ID参数来调整单个图像或组的大小。
为更多，去这里： https ： //gist.github.com/jennyvallon/eca68dc78c3f257c5df5
