使用css设置原始图片宽度和高度的50％使用css

是否有任何方式使用css设置原始图片宽度和高度的50％？例如，我有这样的代码：使用css设置原始图片宽度和高度的50％使用css

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

我不指定任何HTML宽度和高度，但我希望它是原来的高度和宽度的50％。我可以使用CSS来做到这一点吗？

这不起作用：

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

有什么办法来克服这个？谢谢

来源

2013-02-21 Piotr Ciszewski

您应用的CSS样式应该可以工作。你能发布更多细节吗？ – otinanai 2013-02-21 13:37:38

设置50％的宽度将使图像的宽度达到其容器的50％。你需要知道原始尺寸。 – BenM 2013-02-21 13:37:52

这只能用JavaScript完成客户端。 – Mooseman 2013-02-21 13:37:54

您可以缩放图像，如下所述： 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');}

来源

2013-02-21 13:44:31 Jacob

令人惊叹的答案。谢谢。补充我的知识。 – 2013-02-21 15:08:10

正如我在我的评论中所说。在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); 
});

来源

2013-02-21 13:40:40 BenM

只是为什么你必须强制JQuery！ – Jacob 2013-02-21 13:41:56

为什么不呢？它正在成为行业标准，当你比较这个（微不足道）过程所需的代码时，利用jQuery的强大功能是很有意义的。当然，包括一个任务的整个库没有意义，但我高度怀疑OP已经在使用它（我的意思是，谁不是）...... – BenM 2013-02-21 13:44:03

@BenM感谢您的帮助。将尝试这一个以及:) – 2013-02-21 14:25:18

CSS ... myIMG {变焦：50％;}

inline-CSS

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

来源

2015-09-02 08:14:00

你想达到什么目的？ – romuleald 2015-09-02 08:37:01

使用css设置原始图片宽度和高度的50％使用css

回答

相关问题