实现Banner自适应可以使用多种方式，以下以HTML、CSS和JavaScript为例展示不同方式下的实现：
使用CSS实现基本自适应（宽度自适应且高度等比缩放）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.banner {
width: 100%;
height: auto;
max-width: 1920px;
/* 最大宽度 */
}
</style>
<title>Banner自适应</title>
</head>
<body>
<img class="banner" src="your - banner - image.jpg" alt="banner">
</body>
</html>
在上述代码中：
- CSS中给
.banner类设置了width: 100%，让图片宽度始终占满父元素宽度。 -
height: auto确保图片高度根据宽度自适应缩放，保持原有宽高比。 -
max - width: 1920px设置了图片的最大宽度，以防在大屏幕上无限拉伸。
使用CSS Flexbox实现复杂布局下的自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.banner - container {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
/* 设置一个初始高度 */
width: 100%;
background - color: lightgray;
}
.banner {
max - width: 100%;
height: auto;
}
</style>
<title>Banner自适应</title>
</head>
<body>
<div class="banner - container">
<img class="banner" src="your - banner - image.jpg" alt="banner">
</div>
</body>
</html>
此代码中：
- 外层
.banner - container使用display: flex，通过align - items和justify - content属性将图片在容器中居中显示。 - 内层
.banner图片同样设置max - width: 100%和height: auto以实现宽度自适应和高度等比缩放。
使用JavaScript动态计算并实现自适应（根据窗口大小动态改变图片尺寸）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner自适应</title>
</head>
<body>
<img id="banner" src="your - banner - image.jpg" alt="banner">
<script>
function resizeBanner() {
const banner = document.getElementById('banner');
const windowWidth = window.innerWidth;
const maxWidth = 1920;
if (windowWidth > maxWidth) {
banner.style.width = maxWidth + 'px';
} else {
banner.style.width = windowWidth + 'px';
}
banner.style.height = 'auto';
}
// 初始化
resizeBanner();
// 监听窗口大小变化
window.addEventListener('resize', resizeBanner);
</script>
</body>
</html>
在这段JavaScript代码中：
-
resizeBanner函数获取窗口宽度和id为banner的图片元素。 - 比较当前窗口宽度和最大宽度，如果窗口宽度大于最大宽度，将图片宽度设置为最大宽度
1920px；否则设置为窗口宽度。 -
banner.style.height = 'auto'保证高度等比缩放。 -
window.addEventListener('resize', resizeBanner)监听窗口大小变化，调用resizeBanner函数实时调整图片尺寸。
