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

【问题标题】：How to set Image width 1/2 of default without using javascript如何在不使用javascript的情况下将图像宽度设置为默认值的1/2
【发布时间】：2023-03-29 16:41:01
【问题描述】：

我将显示比正常图像小 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 来完成。
请任何形式的帮助！

【问题讨论】：

标签： html css image width

【解决方案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);
}

【讨论】：

【解决方案2】：

您可以使用 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"/>

【讨论】：