代码之家 › 专栏 › 技术社区 › Martin Fric

使用变换时,Div容器仍保持原始图像大小的大小

transform css html

Martin Fric · 技术社区 · 6 年前

我有以下代码:

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

问题是原始img大小为510x255px;

变换图像大小调整后,div仍保持510x255。

如何调整大小?

谢谢

1 回复 | 直到 6 年前

Temani Afif 6 年前

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

.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名称(</div>
</div>

<div class=“block”>
<img src=”https://lorempixel.com/200/200/“style=”--s:0.5“>
<div>img名称(</div>
</div>

<div class=“block”>
<img src=”https://lorempixel.com/200/200/“style=”--s:0.2“>
<div>img名称(</div>
</div>

推荐文章

geany_tab_title_color · 如何将4个div围绕一个中心div?

2 年前

Martin Fric · 使用变换时,Div容器仍保持原始图像大小的大小

6 年前

Niko · 边框css更改速度快于变换旋转

6 年前

Leon1988 · 标题中多行的斜边

6 年前

Levi · 如何使用jq将多个输出对象组合成单个对象

6 年前

Mose · SVG变换:根据X缩放Y

6 年前

spoilerd do · 统一变换。前进是不断变化的

6 年前

Paul · 悬停时变换比例不缩放

6 年前

listener · 在Python中创建音频文件的振幅与频谱图

6 年前

Pep · Matlab-Hough变换中的帧线

6 年前