如何在不使用 javascript 的情况下将图像宽度设置为默认宽度的 1/2

Question

我要显示比正常小 0.5 倍的图像。普通代码

<img src = "./bk.jpg"/>

试过这个

<img src = "./bk.jpg" width = "50%" height = "50%"/>

但是这个宽度是父 <div> 的 50%，而不是默认宽度的 50%。我可以在 javascript 中完成，如下所示

img = getElementById();
img.onload = function(){
 img.width /= 2;
 ...
}

不过我觉得只用css就可以了。
请提供任何帮助！

Answer 1

我认为这是 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);
}

Answer 2

您可以使用 css 比例属性

.half{
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform:scale(0.5);
}

<img src = "http://lorempixel.com/200/200/"/>
<img src = "http://lorempixel.com/200/200/" class="half"/>

如何在不使用 javascript 的情况下将图像宽度设置为默认宽度的 1/2

How to set Image width 1/2 of default without using javascript

html

css

image

width