我使用 bootstrap CSS 和 Javascript 构建了一个网站。我的主要问题是让我的图像以良好的比例适合每个屏幕上的轮播。所以我想出了将图像大小调整为 1365 x 415 像素的想法。这个问题似乎在 15 英寸及以下显示器的所有屏幕上都得到了解决。但最近，我尝试在 17 英寸或更大的屏幕显示器上查看我的网站，轮播中的图像根本不适合屏幕。所以我想知道该怎么做才能解决这个问题。有人可以帮忙吗？
这是我的代码 html 代码:
<!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">
<title>Home Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.navar-default {
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<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>
<![endif]-->
</head>
<body class = "wrapper">
<div class="container-fluid">
<nav class="navbar navar-default">
<div class="container-fluid">
<ul class = "topnav" id="myTopnav">
<li><a class="active" href= "index.html">ASK-Technology</a></li>
<li><a href= "responsive.htm">Responsive Design</a></li>
<li><a href= "seller.htm">Sell</a></li>
<li><a href= "about.htm">About</a></li>
<li class="float"><a href= "#about">☏ +8455481395 </a></li>
<li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/header1.jpg" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>Electronic Repairs.</h3>
<p>Quickly, Fix your devices at low-cost.</p>
</div>
</div>
<div class="item"><img src="images/header2.jpg" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Sell your Smartphones, and Electronics for Cash.</h3>
<p>A simpler process and better service.</p>
</div>
</div>
<div class="item"><img src="images/header3.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Building a responsive web site has never been easier.</h3>
<p>Let's do great things together!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
<hr class = "lineBreak">
<footer class ="footerDesign">
<p align = "center">© Copyrights 2016 All Rights Reserved. Web Site Designed with ♥ by Ahmed Salim Kedote.</p>
</footer>
<aside class="socialMedia"></aside>
<script src="myscripts.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
这是我的轮播图像的引导 CSS 代码:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
您实际上可以通过此链接查看该网站:ask-technology.com 如果您需要更多信息以便帮助，请告诉我。谢谢大家!
最佳答案
将其添加到 CSS 末尾:
.item img {
width: 100%;
}
关于javascript - 当轮播中的图像为 1365 x 415 px 时，如何使轮播图像适合 1 7'' 或更多屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41825011/