1
Ich habe eine Website mit Bootstrap CSS und Javascript erstellt. Mein Hauptproblem bestand darin, meine Bilder mit einem guten Verhältnis auf jedem Bildschirm in ein Karussell zu bringen. Also kam ich auf die Idee, mein Bild auf 1365 x 415 Pixel zu skalieren. Das Problem scheint auf allen Bildschirmen auf 15 "Display und niedriger gelöst zu sein. Aber ich habe kürzlich versucht, meine Website auf einem 17" oder mehr Bildschirm anzuzeigen und die Bilder im Karussell passten überhaupt nicht zum Bildschirm. Also würde ich gerne wissen, was zu tun ist, um dieses Problem zu beheben. Kann jemand helfen?Wie wird Karussell Bild auf 17 '' Bildschirmen oder mehr passen, wenn das Bild im Karussell 1365 x 415 px sind?
Hier Code meinen Code 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>
Hier ist mein Bootstrap-CSS-Code für Karussell Bilder:
.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%;
}
Sie tatsächlich auf diesen Link auf der Website sehen kann: ask-technology.com Wenn Sie weitere Informationen benötigen, um mich zu informieren. Danke Leute!
Ist das das Karussell an der Spitze, sobald Sie die Website öffnen? –