Wyjaśni mi ktoś czemu moje obrazy w karuzeli nie chcą się wyskalować ?
staram się zrobić dopasowane zdjęcia tak żeby nieważne jaki rozmiar miało zdjęcie - zawszę będzie środkowało i pokazywało napisy na tej samej wysokości - już 8 godzinę z tym walczę a ogólnie któryś dzień - zdjęcia są responsywne ale po zmniejszeniu do najmniejszej szerokości obrazy sztucznie się wydłużają i znikają napisy napisanie w @media nic nie daje bo próbowałem - problem jest w css ale nie moge wykminić gdzie żeby było ok
body
{
background-color:black;
}
.nav
{
height: 260px;
float:left;
}
.navbar
{
float:left;
width: fit-content;
position: fixed;
z-index: 2;
left:-20px;
top:-5px;
}
.baner {
width: 100%;
height: 700px;
}
.carousel-item
{
width: fit-content;
height: auto;
opacity: 0.6;
}
.carousel-caption
{
font-size: large;
color: #edbb00;
margin-bottom: 20%;
}
.carousel-caption h2
{
font-size: 60px;
text-transform: uppercase;
font-weight: bold;
}
.carousel-caption
{
color: #edbb00;
font-weight: bold;
}
.dropdown-menu
{
background-color:transparent;
padding:0;
border-radius: none;
border:none;
}
.dropdown-menu:hover
{
background-color:transparent;
border:none;
}
.dropdown-menu>li>a
{
background-color: #edbb00;
padding:10px;
border-radius: 35px;
color:black;
}
.dropdown-menu>li
{
padding-bottom:5px;
border-radius: 25px;
}
.carousel-caption a
{
background: #edbb00;
padding: 15px 35px;
display: inline-block;
color: black;
border-radius: 25px;
}
.carousel-control .left
{
background-image: none;
}
.carousel-control .right
{
background-image: none;
}
.carousel-indicators .active
{
background-color:#edbb00;
border-color: #edbb00;
border-radius: 50px;
}
.btn-sm
{
width: 66px;
}
.jumbotron
{
background-color: black;
}
.container-fluid
{
width: 100%;
height: 100%;
background-color:black;
text-align: justify;
padding: 20px;
color:white;
margin-top: 20px;
}
#main-title
{
text-align: center;
margin-bottom: 30px;
}
.buttons
{
margin:30px;
text-align: center;
padding:12px;
margin-bottom: 40px;
}
.col-sm-4
{
margin-bottom: 30px;
}
.up-button
{
float:right;
}
.page-footer
{
background-color:black;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
}
.footer-copyright
{
background-color:black;
text-align: justify;
padding: 10px;
color:white;
margin-left:auto;
margin-right:auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
}
kod karuzeli
<!--ustawienia sliderów-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="8000">
<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>
<!--koniec ustawienia sliderów-->
<div class="carousel-inner">
<!--pierwszy slider-->
<div class="carousel-item active">
<img class="baner img-fluid" src="photo/dezodoranty.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animate__animated animate__fadeInDown animate__delay-1s">Hej! Zainteresowany?</h2>
<p class="animate__animated animate__fadeInLeft animate__delay-2s">Jeśli spodobała ci się moja strona</br>
i myślisz, że będę się świetnie sprawdzał w twojej firmie</br>
nie czekaj tylko rozwiń przycisk i sprawdź moje CV!</br>
<div class="animate__animated animate__fadeInRight animate__delay-3s" class="btn-group">
<button type="button" class="btn btn-warning btn-primary" title="Zobacz moje CV">Curriculum Vitae</button>
<button type="button" class="btn btn-warning btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-warning" role="menu">
<li><a href="Jan_Pytlarczyk_(PL).pdf">Po polsku</a></li>
<li><a href="Jan_Pytlarczyk_(ENG).pdf">In english</a></li>
</ul>
</div>
</div>
</div>
<!--koniec pierwszego slidera-->
<!--drugi slider-->
<div class="carousel-item">
<img class="baner img-fluid" src="photo/torba.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animate__animated animate__rotateInDownLeft animate__delay-1s">Umówmy się już dziś!</h2>
<p class="animate__animated animate__fadeInRightBig animate__delay-2s">Ok, sprawdziłeś moje CV, teraz czas na spotkanie!</br>
Kliknij w przycisk E-mail i umówmy się na rozmowę,</br>
w czasie której, omówimy warunki współpracy!
</p>
<a href="mailto:jan.pytlarczyk@protonmail.com" title="Napisz do mnie maila" class="animate__animated animate__fadeInUpBig animate__delay-3s"><i class="icon-gmail mr-3"></i>E-mail</a>
</div>
</div>
<!--koniec drugiego slidera-->
<!--trzeci slider-->
<div class="carousel-item">
<img class="baner img-fluid" src="photo/IMG_20190727_131249.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animate__animated animate__backInRight animate__delay-1s">Poznajmy się na Linked in!</h2>
<p class="animate__animated animate__backInDown animate__delay-2s">Współczesne poszukiwnaie pracy,</br>
to wykorzystywanie wielu portali,</br>
w tym także Linked in!</br>
Klinknij i sprawdź mój profil!</br>
</p>
<a href="https://www.linkedin.com/in/jan-pytlarczyk" target="_blank" title="Zapraszam na mój profil na Linkedin" class="animate__animated animate__fadeInUp animate__delay-3s"><i class="icon-linkedin mr-3"></i>Linked in</a>
</div>
</div>
<!--koniec trzeciego slidera-->
</div><!--div kończący carousel-inner slider-->
<!--przyciski sliderów-->
<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>
<!--koniec przycisków sliderów-->
</div><!--div zamykający ustawienia sliderów-->