javascript - 将图片宽度设置为比例大小

标签 javascript

想象你有一张图片

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

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

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

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

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

感谢您的回答。

最佳答案

只需更改 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>

关于javascript - 将图片宽度设置为比例大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47434810/

相关文章:

javascript - 使用 jQuery 拆分和修改元素

javascript - 如何检查是否从 jQuery 调用了特定的 id?

javascript - jQuery 使用 HTML textarea 检查多个字符串

javascript - Canvas/JavaScript - 单击鼠标翻转正方形的颜色

javascript - 如何使用 Jquery 在元素循环中传递数据?

javascript - 声明的变量似乎不是全局的

javascript - 正则表达式 - 匹配

javascript - jqGrid动态事件

javascript - 如何在 JQUERY 中使用替换来替换某些内容

javascript - javascript 数组的范围从 IE9 到 FireFox/Chrome 有所不同