Moin,
ich habe in meinem Website-Projekt das Bootstrap Carousel eingebaut, ich möchte gern das dieses eine feste Höhe behält z.B.: 800px für jedes Format (Desktop, Tablet, Smartphone) und width 100%.
Mein Problem ist, wenn ich dem Carousel eine feste Höhe zuweise bleiben die darin enthaltenden Bilder jedoch fest am Rand und minimieren sich dadurch und füllen nicht mehr die Höhe des Carousel´s aus.
Kennt jemand eine CSS Anweisung womit die Bilder aus der Mitte heraus zentriert skaliert werden? So das sie im width über das Carousel auch drüber hinaus verschwinden und dadurch die Höhe des Carousels behalten.
Leider konnte ich über Google nichts gescheites finden bisher. . .
Bootstrap Carousel:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/Headerbild.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Headerbild_2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Headerbild_3.jpg" alt="Third slide">
</div>
<div class="slidertypo">
<h1>Fotografie</h1>
<h2>ist die Leidenschaft, den Moment festzuhalten</h2>
</div>
<div class="sliderbuttons">
<a href="shop.html" class="shop">zum Shop Springen</a>
<a href="shooting.html" class="shooting">Shooting buchen</a>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Vielleicht hilf das Bildliche Beispiel:
Vielen Dank für Hilfestellungen! :)
ich habe in meinem Website-Projekt das Bootstrap Carousel eingebaut, ich möchte gern das dieses eine feste Höhe behält z.B.: 800px für jedes Format (Desktop, Tablet, Smartphone) und width 100%.
Mein Problem ist, wenn ich dem Carousel eine feste Höhe zuweise bleiben die darin enthaltenden Bilder jedoch fest am Rand und minimieren sich dadurch und füllen nicht mehr die Höhe des Carousel´s aus.
Kennt jemand eine CSS Anweisung womit die Bilder aus der Mitte heraus zentriert skaliert werden? So das sie im width über das Carousel auch drüber hinaus verschwinden und dadurch die Höhe des Carousels behalten.
Leider konnte ich über Google nichts gescheites finden bisher. . .
Bootstrap Carousel:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/Headerbild.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Headerbild_2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Headerbild_3.jpg" alt="Third slide">
</div>
<div class="slidertypo">
<h1>Fotografie</h1>
<h2>ist die Leidenschaft, den Moment festzuhalten</h2>
</div>
<div class="sliderbuttons">
<a href="shop.html" class="shop">zum Shop Springen</a>
<a href="shooting.html" class="shooting">Shooting buchen</a>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Vielleicht hilf das Bildliche Beispiel:
Vielen Dank für Hilfestellungen! :)
