Question

我需要比例图像平滑，可变图像高度，宽度是通过高度大小自动缩放css width: auto

css和HTML ：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

的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更改值，请执行以下操作：{{1}它的效果不好，高度也是300px，但宽度保持不变，不能缩放。

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

Answer 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

Answer 2

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

如果这是您所需要的，我在this JSFiddle

中有一个解决方案

基本上，您正在调整页脚大小，因此图像会调整其高度。但原始图像尺寸永远不会改变，宽度也是如此。

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

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

HTML CSS JS onload改变图像大小不良规模

2 个答案: