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。这将使图像符合其包含元素。

jQuery或Javascript图像查看器，用于不同大小的单个图像？

1 个答案: