html用js键实图片与浏览器高度相同
时间: 2023-12-24 15:05:08 浏览: 37
你可以使用以下 HTML 和 JavaScript 代码来实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置图片高度与浏览器相同</title>
<style>
img {
max-width: 100%; /* 防止图片超出父元素宽度 */
}
</style>
</head>
<body>
<img id="my-image" src="your-image-url" alt="Your Image">
<script>
function setImgHeight() {
var windowHeight = window.innerHeight; // 获取浏览器窗口高度
var img = document.getElementById('my-image'); // 获取图片元素
img.style.height = windowHeight + 'px'; // 将图片高度设置为浏览器窗口高度
}
// 页面加载完成后设置图片高度
window.onload = setImgHeight;
// 监听浏览器窗口大小变化,重新设置图片高度
window.addEventListener('resize', setImgHeight);
</script>
</body>
</html>
```
在代码中,我们首先在 HTML 中添加了一个 `img` 元素,并设置了其 `id` 和 `src` 属性。我们还添加了一个样式,防止图片超出父元素的宽度。
然后在 JavaScript 中,我们定义了一个名为 `setImgHeight` 的函数,用于设置图片的高度。在函数中,我们首先获取了浏览器窗口的高度,然后获取了要设置高度的图片元素。最后,我们将图片的高度设置为浏览器窗口高度。
接下来,我们在页面加载完成后调用 `setImgHeight` 函数,以确保图片高度在页面加载时设置为与浏览器窗口相同。我们还使用 `window.addEventListener` 监听浏览器窗口大小变化事件,并在窗口大小变化时重新设置图片高度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)