N'Abend zusammen!
Ich bin gerade dabei, mir für meine Bewerbung zum Mediengestalter eine Website zu coden. Alles handgemacht und ohne Template. Jetzt ist nur ein Problem aufgetaucht. Ich nutze Bootstrap und auch dessen Feature des Carousels in welchem mir eben verschiedene Bilder angezeigt werden sollen, so interaktiv zum durchklicken.
So weit so gut, schaut auch alles ganz schick aus bei mir im Firefox. Sobaöd ich jetzt aber vom PC oder Android über Chrome auf die Website zugreife, sind die Bilder totaaal in die Höhe gezogen.. Jemand eine Idee woran das liegen kann? Was kann Firefox, was Chrome nicht kann? Bin schon langsam am Verzweifeln..
Danke im Voraus für jegliche Hilfe!
LG, Jonas
PS: Hier der Code und die Website
Code
<section id="carousel">
<div class="container">
<h2>Photos</h2><br>
</div>
<div id="carousel-home" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner img-responsive" role="listbox">
<div class="carousel-item active img-responsive">
<img class="d-block img-fluid img-responsive" src="img/glasses.jpg" alt="Glasses on Laptop">
<div class="carousel-caption">
<h3>Glasses on a Laptop</h3>
<p>Looking smart man</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid img-responsive" src="img/table.jpg" alt="Business Table">
<div class="carousel-caption">
<h3>Business Table</h3>
<p>Looking busy man</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid img-responsive" src="img/street.jpg" alt="Light Effect in Urban Surroiunding">
<div class="carousel-caption">
<h3>Light Effects</h3>
<p>Looking lit man</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" 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="#carousel-home" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>Code
#carousel {
padding-top: 5rem;
height: auto;
width: 100%;
}
#carousel img{
height: auto;
max-width: auto;
max-height: 2726px;
width: 100%;
}