使用 css 设置原始图片宽度和高度的 50%答案

【问题标题】：setting the 50% of original picture width and height using css使用 css 设置原始图片宽度和高度的 50%
【发布时间】：2013-02-06 20:36:58
【问题描述】：

有没有办法使用css设置原始图片宽度和高度的50%？例如我有这个代码：

    <img src="http://content.captive-portal.com/files/ign/movie-news/content/2b.jpg">

我没有在 html 中指定任何宽度和高度，但我希望它是原始高度和宽度的 50%。我可以使用 CSS 来做到这一点吗？

这不起作用：

img{width:50%; height:50%}

有什么办法可以克服吗？谢谢

【问题讨论】：

您应用的 css 样式应该可以工作。你能发布更多细节吗？
设置 50% 的宽度将使图像的宽度达到其容器的 50%。您需要知道原始尺寸。
这只能在客户端使用 JavaScript 完成。
我明白了。我就是这么想的。
可能重复：stackoverflow.com/questions/8397049/…

标签： css image image-processing

【解决方案1】：

正如我在评论中所说。在 CSS 中设置 width: 50% 只会将图像的宽度设置为其包含元素的 50%。

您需要使用 JavaScript 来实现这一点。 jQuery 让它变得非常简单，例如：

$('img').each(function() {  
    var the_width = $(this).width(),
        new_width = Math.round(the_width / 2);
    $(this).width(new_width);
});

【讨论】：

为什么要强制使用 JQuery！
为什么不呢？它正在成为行业标准，当您比较这个（微不足道的）过程所需的代码时，利用 jQuery 的力量是有意义的。当然，为一项任务包含整个库是没有意义的，但我高度怀疑 OP 已经在使用它（我的意思是，谁没有）......

【解决方案2】：

您可以按此处所述缩放图像： CSS image resize percentage of itself?

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');}

【讨论】：

惊人的答案。谢谢。增加我的知识。

【解决方案3】：

CSS... 我的IMG{zoom:50%;}

内联 CSS

<IMG STYLE="zoom:50%;" SRC="...">

【讨论】：

你想达到什么目的？

【解决方案4】：

可以内联解决：

<img src="..." onload="this.width*=0.5"/>

【讨论】：