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.normalimg.fake是相同的图像。
浏览器支持说明:此方法适用于所有浏览器,因为所有的浏览器都支持方法中使用的css属性。

该方法以这种方式工作:

  1. '#wrap'和'#wrap img.fake'有flow
  2. #wrap overflow: hidden设置#wrap与内部图像相同的尺寸( img.fake
  3. img.fake只是img.fake中没有absolutefix位置的一个元素,不能打破第二步的结果。
  4. #img_wrap#img_wrapabsolute位置,并且扩展到整个元素( #wrap
  5. 第四步的结果是#wrap_img与图像尺寸相同。
  6. 使用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/rightposition: fixedmin/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