html - 如何在不使用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 scale 属性来做到这一点

.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"/>