JS中图像的变化

Question

当屏幕的宽度变小或变大时，如何在JS中减小或增加图像的宽度？

Answer 1

我在表格中有一个图像，为了让它适应表格，我在我的css中使用了这个类：

.img-fluid {
    max-width: 100%;
    height: auto;
}

Answer 2

用css而不是js的窗口来调整图像的大小要容易得多。

如果你的图像看起来像这样：

<div class="Somediv">
    <img src="somesource" class="Someimage"></img>
</div>

.Somediv {
    width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}

.Someimg {
    display: block;
    width: 100%;
}

如果你真的想通过JS做到这一点，here是element.classList上的官方文档，它将帮助你做你想做的事情。

Answer 3

你不需要Javascript来做这件事。这只能通过CSS完成，您需要将图像宽度设置为100%，以使其响应浏览器窗口大小调整。当你调整你的浏览器窗口的大小时，它会根据相同宽高比的图像宽度自动取高。

你需要像这样写一段css代码：

img.img-responsive {
    width: 100%;
}