轮播的图像比我预期的要大。
我的代码
* {
margin: 0;
padding: 0;
}
.menu {
background-color: gray;
width: 500px;
height: 100%;
float: left;
}
.title {
color: white;
font-size: 30px;
margin: 0px 5px;
margin-left: 40px;
text-align: center;
}
.first {
padding-top: 30px;
}
html,
body,
.menu {
height: 100%;
}
body {
margin: 0;
}
.relative {
position: relative;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
li a img {
width: 100%;
height: 100%;
}
.float-right {
width: calc(100% - 500px);
overflow: hidden;
float: right;
}<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="menu" id="menu">
<h2 class="title first">SITE</h2>
<ul class="">
<li><a class="home" href="">Home</a></li>
<li><a class="profile" href="">Detail</a></li>
</ul>
</div>
<div class="imgArea float-right" id="carousel">
<ul>
<li><a href="#"><img src="photo1.jpg" alt=""></a></li>
<li><a href="#"><img src="photo2.jpg" alt=""></a></li>
</ul>
</div>
<script src="carousel.js"></script>当我运行这个网站时，轮播的图像比原始图像大，就像图中的黄色箭头一样。(它不显示图像...)
我想将轮播放在浏览器的剩余区域中，并且轮播的图像大小在该区域中调整为 100%。
所以我真的无法理解为什么轮播的图像会被缩放。当我在html中编写像<a href="#"><img src="photo1.jpg" width="100px" height="100px" alt="">这样的内容时同样的情况也会发生。
最佳答案
在您提供的CSS中:
li a img{
width: 100%;
height: 100%;}
你也需要改变它
li a img{
width: 100px;
height: 100px;}
此外，由于您已经在使用 bootstrap，您可能想查看 bootstrap 的轮播 https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-container {
width: 100%;
float: left;
}
.header {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
}
.imgArea {
float: left;
width: 75%;
height: 100%;
}<body>
<div class="main-container">
<div class="header">SITE</div>
<div class="sidebar" id="menu">
<ul class="sidebar-ul">
<li><a class="home" href="">Home</a>
</li>
<li><a class="profile" href="">Detail</a>
</li>
</ul>
</div>
<div class="imgArea" id="carousel">
<ul class="carousel-ul">
<li>
<a href="#"><img src="http://lorempixel.com/400/200" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200" alt="" /></a>
</li>
</ul>
</div>
</div>
<script src="carousel.js"></script>
</body>关于javascript - 轮播的图像比我预期的要大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47986994/