大家好，在一个网站的主页实现图片轮播，但无法调节图片大小，请问是什么原因呀？
以下是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="homepage.css">
<script src="https://kit.fontawesome.com/2611063310.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<h2>Books & Co</h2>
<div class="sign-up">
<a href=""><i class="fa-solid fa-user"></i>Sign up</a>
</div>
</div>
<div class="nav-2">
<a href="">Home</a>
<a href="">Books</a>
<a href="">Gift</a>
<a href="">Help</a>
</div>
<div>
<div class="carousel">
<ul id="imgs">
<li class="active"></li>
<li> <img src="poster.jpg" width="1000px" height="600px" alt=""></li>
<li><img src="poster2.jpg" width="1000px" height="600px" alt=""></li>
<li><img src="20dis.jpg" alt="" width="1000px" height="600px"></li>
</ul>
<button class="left_btn">
<
</button>
<button class="right_btn">
>
</button>
<ul id="btns">
<li class="btn_at"></li>
<li class="btn_unat"></li>
<li class="btn_unat"></li>
</ul>
</div>
<footer>
<h6>Follow Us</h6>
<div class="icons">
<a href="https://twitter.com/"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a>
</div>
<div>
<p class="sum">Copyright © 2022 Books & Co. All rights reserved.</p>
</div>
</footer>
<script src="slide.js" type="text/javascript"></script>
</body>
</html>
* {
margin: 0;
text-decoration: none;
box-sizing: border-box;
padding: 0;
}
body{
background-color: #fff7d6;
}
.header{
display: flex;
justify-content: space-between;
background-color: #fff7d6;
padding-left: 2%;
padding-right: 2%;
align-items: center;
height:80px;
background-image:url('poster.webp');
}
h2{
color:#fff7d6;
font-size:30px;
z-index:2;
}
.nav-2{
display: flex;
justify-content: center;
font-size: 22px;
background-color:#323958;
}
.nav-2 > a{
margin-left: 10%;
margin-right: 10%;
text-decoration: none;
color:#fff7d6;
}
.sign-up > a{
font-size: 22px;
text-decoration: none;
color:#fff7d6;
}
.sign-up{
display: flex;
align-items: center;
justify-content: space-between;
}
#imgs{
position: absolute;
width: 1000px;
height: 600px;
}
ul{
list-style: none;
margin: auto;
}
.carousel{
width: 509px;
height: 212px;
margin: auto;
position: relative;
background-color: #fff7d6;
}
.carousel ul:nth-of-type(1){
width: 100%;
height: 100%;
position: relative;
}
.carousel ul:nth-of-type(1) li{
position: absolute;
top: 0;
left: 0;
}
.carousel ul:nth-of-type(1) li img{
width: 509px;
height: 212px;
}
.active{
display: block;
}
.btn_at{
background-color: #323958;
}
.btn_unat{
background-color: #323958;
}
.unactive{
display: none;
}
.carousel button{
color: #323958;
position: absolute;
height: 100%;
font-size: 25px;
font-weight: bold;
background-color: transparent;
border-width: 0;
color: #fff7d6;
display: none;
}
.carousel .left_btn{
top: 0;
left: 0;
}
.carousel .right_btn{
top: 0;
right: 0;
vertical-align: middle;
}
.carousel ul:nth-of-type(2){
position: absolute;
bottom: 6px;
width: 16%;
height: 5%;
left: 42%;
}
.carousel ul:nth-of-type(2) li{
float: left;
border-radius: 100%;
width: 8px;
height: 8px;
margin: 2px 10.7%;
}
.fa-solid{
font-size: 22px;
margin-right:5px;
}
footer{
height:160px;
background-color:#323958 ;
}
h6{
padding-top:15px;
margin-top:10px;
color:#fff7d6;
text-align: center;
font-size: 22px;
}
.icons{
display: flex;
justify-content: center;
margin-top: 18px;
font-size: 20px;
}
.fa-brands{
color:#fff7d6;
padding-left: 10px;
padding-right:10px;
}
.sum{
text-align: center;
margin-top:20px;
color:#fff7d6;
font-size: 13px;
}
#dis{
text-align: center;
width: 70%;
height: 70%;
}
var img_index = 0
var lis_1 = document.querySelectorAll("#imgs li")
var lis_2 = document.querySelectorAll("#btns li")
var left_btn = document.querySelector(".left_btn")
var right_btn = document.querySelector('.right_btn')
var carousel = document.querySelector('.carousel')
var timeId
function clear_img(){
lis_1.forEach(function(ele){
ele.className='unactive'
})
}
function clear_btn(){
lis_2.forEach(function(ele){
ele.className='btn_unat'
})
}
function changePicture1(){
img_index++
if(img_index>2){
img_index=0
}
clear_img()
clear_btn()
lis_1[img_index].className='active'
lis_2[img_index].className='btn_at'
}
function changePicture2(){
img_index--
if(img_index<0){
img_index=2
}
clear_img()
clear_btn()
lis_1[img_index].className='active'
lis_2[img_index].className='btn_at'
}
timeId = setInterval(changePicture1,3000)
function stop(){
clearInterval(timeId)
}
function start(){
timeId = setInterval(changePicture1,3000)
}
lis_2.forEach((ele,index)=>{
ele.onclick=function(){
stop()
clear_btn()
clear_img()
lis_1[index].className='active'
lis_2[index].className='btn_at'
img_index = index
}
})
left_btn.onclick=function(){
stop()
changePicture2()
}
right_btn.onclick=function(){
stop()
changePicture1()
}
carousel.addEventListener('mouseover',function(){
left_btn.style.display='block'
right_btn.style.display='block'
this.style.opacity=0.5
},false)
carousel.addEventListener('mouseout',function(){
left_btn.style.display='none'
right_btn.style.display='none'
this.style.opacity=1
},false)
window.addEventListener('blur',()=>{
stop()
console.log('Stop')
},false)
window.addEventListener('focus',()=>{
start()
console.log('Start')
},false)
在html中直接修改大小，在css中修改都试过了，但那个图片一动不动quq，谢谢了～～
没办法上传图片 ～ 图片居中但只有一个硬币那么大，作为主页图片想铺平但实现不了quqq
