javascript - 用于不同尺寸的单个图像的 jQuery 或 Javascript 图像查看器？

Question

我有一个图像。我想在一个小窗口中调整该图像的大小。如何通过使图像更大和更小的图像来拉伸窗口中的图像。

宽度和高度属性无法正常工作。我的意思是如何通过如下给出宽度和高度来拉伸图像；

width=300px;height=300px
again width=600px;height=600px;
and width=900px;height=900px;
and widht=1800px;height=1800px;

Answer 1

设置auto将保持与宽度的比率的高度。此外，HTML 属性不需要“px”单位，这适用于 CSS。

<img src="someimage.jpg" width="300" height="auto" alt="Some image">
<img src="someimage.jpg" width="600" height="auto" alt="Some image">
<img src="someimage.jpg" width="900" height="auto" alt="Some image">
<img src="someimage.jpg" width="1800" height="auto" alt="Some image">

您标记了这个 javascript。如果您想使用 JavaScript 更改大小，则需要先使用 id 引用图像，然后再更改属性。

<script>
  window.onload = function(){
    document.getElementById('testimg').width = 500;
  }
</script>

<img id="testimg" src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48.jpg" height="auto">

如果您希望图像随窗口变大或变小，例如在弹出窗口中，请将宽度设置为100%并将高度设置为auto。这将使图像符合其包含的元素。