HTML CSS JS onload 改变图像大小坏比例答案

【问题标题】：HTML CSS JS onload change image size bad scaleHTML CSS JS onload 改变图像大小坏比例
【发布时间】：2023-04-10 19:19:01
【问题描述】：

我需要平滑缩放图像，变量是图像高度，宽度是使用 css width: auto自动缩放高度大小

css 和 HTML：

footer {
  position: fixed;
  bottom: 0;
  height: 100%; /* if i change size here example: 300px get good scale */
  margin-top: 15px;
}

footer img[usemap] {
  border: none;
  width: auto;
  max-height: 100%;
  height: 100%;
}

<footer>
  <img src='https://burritojustice.files.wordpress.com/2011/02/img_3769.jpg' usemap="#Map" name="#Map" id="map">
</footer>

javascript:

$('footer').css('height', '300px'); //if i change size here get bad scale
/* at the result i need write with javascript how much height it's my image and get nice scale */

如果我将 css 行：height: 100% 更改为 height: 300px，它的效果很好，宽度可以按比例更改高度，但如果我尝试使用 javascript 更改值，如下所示：$('footer').css('height', '300px'); 它效果不好，也可以得到 300px 高度但是宽度保持不变，不缩放。

https://jsfiddle.net/bddgo26o/1/

【问题讨论】：

标签： javascript html css

【解决方案1】：

检查小提琴的v3：

https://jsfiddle.net/bddgo26o/3/

这是你需要的吗？

footer {
    position: fixed;
    bottom: 0;
    height: 20%; /* if i change size here example: 300px get good scale */
    width:100%;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid black;
}

footer img[usemap] {
    border: none;
   max-height: 100%;
    min-height:100%;
}


$('footer').css('height', '50%'); //now changing gets ok

【讨论】：

您需要“通过 javascript”进行操作吗？我不确定我是否真的了解你
我需要用javascript来做
刚刚添加了页脚 css 以查看它也可以正常工作。（不将图像高度分配给页脚高度，因为我认为最好不这样做）。仅 CSS，仅此而已。
谢谢，当我的声望达到 15 时，我给了你代表，因为现在我没有权限给予 :)

【解决方案2】：

如果我理解正确，您想调整页脚的高度，并以相同的比例调整图像大小？

如果这是你需要的，我在this JSFiddle有一个解决方案

基本上，您正在调整页脚的大小，因此图像正在调整其高度。但原图大小不变，宽度不变。

我添加了这段代码来更改图像高度（使其与页脚相同）：

$('footer img[usemap]').height($("footer").height());

【讨论】：