Question

想象一下，你有一个图像

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

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

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

然而，关于第二部分的wat？是否可以做类似

的事情

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

感谢您的回答。

Answer 1

根据documentation

<强>宽度

图像的固有宽度（以像素为单位）。在HTML 4中，要么a   百分比或像素是可接受的值。但是，仅在HTML5中   像素是可以接受的。

使用vim属性

style

Answer 2

应该是style.height和style.width。请查看下面的代码段以供参考。

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

<img id="imgid" height="180" width="240" src="https://www.joomlack.fr/images/demos/demo2.jpg" alt="" />

Answer 3

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

Answer 4

如果我理解你的问题，这将解决你的问题：

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

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

4 个答案: