将图片宽度设置为比例大小答案

【问题标题】：Set picture width to proportional size将图片宽度设置为比例大小
【发布时间】：2018-05-06 04:45:39
【问题描述】：

想象一下你有一张图片

<img id="imgid" height="15" width="149" src="image.png" alt="[]" />

并且您想将其尺寸更改为 height="30" 并将宽度更改为比例大小。第一部分很简单：

document.getElementById('imgid').height=30px;

但是，第二部分呢？是否可以做类似的事情

document.getElementById('imgid').width='auto';

感谢您的回答。

【问题讨论】：

你应该得到当前高度，找出它与目标高度的比率，然后应用相同的比率来获得新的宽度。示例：如果当前高度为 15，则比率为 30/15 = 2... 所以新宽度为旧宽度 * 2
Afaik 应该可以。你能试试吗？如果没有，你总是可以先得到宽度并做宽度=新高度/旧高度*当前宽度
检查此链接Link，因为它回答了您的问题。

标签： javascript

【解决方案1】：

根据documentation

宽度

图像的固有宽度（以像素为单位）。在 HTML 4 中，百分比或像素是可接受的值。然而，在 HTML5 中，只有像素是可以接受的。

改用style 属性

document.getElementById('imgid').style.height="30px";
document.getElementById('imgid').style.width='auto';

【讨论】：

【解决方案2】：

应该是style.height 和style.width。查看下面的 sn-p 以供参考。

document.getElementById('imgid').style.height = '90px';
document.getElementById('imgid').style.width = 'auto';

&lt;img id="imgid" height="180" width="240" src="https://www.joomlack.fr/images/demos/demo2.jpg" alt="" /&gt;

【讨论】：

【解决方案3】：

如果我理解并纠正您的问题，这将解决您的问题：

img {
  max-height: 30px;
  width: auto;
}

【讨论】：

【解决方案4】：

只需更改 css 属性（包括 jQuery 和纯 JS 解决方案）：

$(document).ready(function() {

  $("#resize").click(function() {
    $("#test").css("width", "100px");
    $("#test").css("height", "auto");
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <script>
    function resizeImg() {
      var el = document.getElementById("test")
      el.style.width = "200px"
      el.style.height = "auto"
    }
  </script>
  <img id="test" src="https://media.licdn.com/media/p/8/000/1e9/0e5/26e178f.png" width="323" height="110">
  <br>
  <a href="javascript:;" id="resize">Resize jQuery</a>
  <a href="javascript:;" onclick="resizeImg()">Resize plain JS</a>
</body>

【讨论】：