html - 使用 transform 时，div 容器仍保持原始图像大小

Question

我有以下代码:

<div style="text-align:center;">
   <img src="http://imgurl" style="transform: scale(0.5);"/>
   <div>img name</div>
</div>

问题是原始 img 大小是 510x255px；

转换图像后调整大小但 div 保持 510x255。

如何调整大小？

谢谢，

Answer 1

如果您的图像定义为固定高度/宽度，您可以尝试这样的操作:

.block {
  display:inline-block;
  vertical-align:top;
  border:1px solid red;
  text-align:center;
}
.block img {
  height:calc(200px * var(--s,1));
  width:calc(200px * var(--s,1));
  /*You can keep only one of the above and the other will be auto*/
}

<div class="block">
   <img src="https://lorempixel.com/200/200/">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.5">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.2">
   <div>img name</div>
</div>

你也可以这样做:

.block {
  display:inline-block;
  vertical-align:top;
  border:1px solid red;
  text-align:center;
}
.block img {
  width:calc(100% * var(--s,1));
}

<div class="block">
   <img src="https://lorempixel.com/200/200/">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.5">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.2">
   <div>img name</div>
</div>