5

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

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

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

这不起作用：

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

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

4

4 回答 4

13

您可以按此处所述缩放图像： 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');}​
于 2013-02-21T13:44:31.650 回答
2

正如我在评论中所说。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-21T13:40:40.750 回答
0

可以内联解决：

<img src="..." onload="this.width*=0.5"/>
于 2020-10-24T10:19:39.587 回答
-1

CSS... myIMG{zoom:50%;}

内联 CSS 

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

于 2015-09-02T08:14:00.450 回答