wake-up-neo.net

Wie mache ich das Bootstrap-Karussell-Image ansprechbar?

Ich möchte das gleiche Verhältnis der Bilder beibehalten. Das Problem ist, dass es sich dehnt, wenn der Browser breit ist, und wenn es kleiner wird.

Ich habe alle SO - Fragen hier überprüft, aber die meisten haben mir nicht geholfen.

Hier ist das Markup:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

und hier ist der CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

Ich habe versucht, ein jsfiddle zu machen, aber ich konnte hier nicht den Link zur Seite http://maanastore.com/home.php

htmlcsstwitter-bootstraptwitter-bootstrap-3
16
user3205189

Entfernen Sie die folgenden CSS-Regeln aus den entsprechenden Dateien:

In der Datei home.php

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Fügen Sie auch margin-top: 51px; zur .carousel-Klasse in der Datei carousel.css hinzu und entfernen Sie height:500px aus derselben Klasse, da Sie die Navigationsleiste fixiert haben.

11
Ravimallya

Ich fand es am besten, das Folgende zu entfernen.

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

und in .carousel entfernen:

height: 500px;

und in . Karussell .item entfernen

 height: 500px;

für mich hat das Image so funktioniert, wie ich es wollte, aber stellen Sie sicher, dass Sie zuerst ein Image in Ihre HTML-Datei einfügen. Andernfalls denke ich, dass es einfach zu nichts zusammenbricht, wenn Sie lokal arbeiten.

bearbeiten: Ein anderer Benutzer schlug vor, das hinzuzufügen
Bitte beachten Sie, dass ich empfehlen sollte, das Bild beizubehalten, wenn das Bild auf beiden Seiten oder sogar auf einer Seite graue Streifen aufweist

.carousel-inner > .item > img {
    min-width: 100%;
}
6
Cameron

was ich am Ende tat, war das Hinzufügen eines Divs nach innen, dann wurde der Bildhintergrund des Div als reaktionsfähig

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <div class="img1">
        </div>
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">-->
    </div> 
</div> 


<style>
  .carousel-inner { 
     height: 100vh;
     <! --  custom hight -->
  }

  .carousel-item  { 
     height: 100%;
  }

  .img1 {
     background-image: url('../images/home/bng_00.jpg');
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-attachment: fixed !important;
     background-size: cover !important;   
     background-position: center !important;
    }
</style>
1
oldman

ich habe an einem solchen Projekt gearbeitet. Dies könnte jemandem helfen, der einen Schieberegler benötigt, der mit dem Browser reagiert.

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700");
body {
  font-family: "Open Sans", sans-serif;
  color:black;
}

slider{
  display: block;
  width: 100%;
  height: 80%;
  overflow: hidden;
  position: absolute;
}
 
 slider > *{
  position: absolute;
  display: block;
  width:100%;
  height: 100%;
  animation: slide 8s infinite;
 }

 slide:nth-child(1){
  left:0%;
  animation-delay: -10s;
  background-image: url(../images/slider7.jpeg);
  background-size: cover;
  background-position: center;
 }

 slide:nth-child(2){
  animation-delay: -12s;
  background-image: url(../images/slider2.jpeg);
  background-size: cover;
  background-position: center;
 }


 slide:nth-child(3){
  animation-delay: -14s;
  background-image: url(../images/slider6.jpeg);
  background-size: cover;
  background-position: center;
 }
  slide:nth-child(4){
  animation-delay: -16s;
  background-image: url(../images/slider0.jpeg);
  background-size: cover;
  background-position: center;
 }


slide p{
  font-family: Comfortaa;
  font-size: 70px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin:10%;
  color:#fff;
}
slide h1{
  font-family: Comfortaa;
  font-size: 60px;
  text-align: center;
  display: inline-block;
  color:#fff;
  margin-top: 20%;
  margin-left: 10%;
}
@keyframes slide {
  0% {left:100%; width:100%;}
  5% {left:0%;}
  25% {left:0%;}
  30% {left: -100%; width: 100%;}
  30.0001%{left: -100%; width:0%;}
  100%{left: 100%; width: 0%}

}
<section class="container">
                <slider>
                        <slide></slide>
                    <slide><h1>Slide Text one</h1></slide>
                    <slide><h1>Slide Text Two</h1></slide>
                     <slide><h1>Slide Text Three</h1></slide>
                </slider> 
 </section>

Dieser Link kann Ihnen auch weitere Einblicke geben Bilder reaktionsschneller machen

0
MUGOYA DIHFAHSIH

Sie können eine typische Verwendung von margin verwenden, um das Ergebnis zu verbessern, indem Sie Ihr Bild zentrieren. 

.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.    
max-width: 100%; }
0
T0N1

Ich habe diese Anpassung an bootstrap.css in den Zeilen 5835 - 5847 vorgenommen:

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

Arbeitete wie ein Champion!

0
gvbaker55