• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

obraz nie skaluje się do odpowiednich wymiarów - bootstrap

VPS Starter Arubacloud
0 głosów
238 wizyt
pytanie zadane 12 października 2020 w HTML i CSS przez napoludniestad.pl Użytkownik (960 p.)

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-->  

 

1 odpowiedź

0 głosów
odpowiedź 12 października 2020 przez napoludniestad.pl Użytkownik (960 p.)
Ok doczytałem na stackoverflow - że trzeba usunąć d-none d-md-block  z carusel- caption  -udało się :) pojawiają się napisy nawet przy małym oknie ale... - zdjęcia nadal są rozciągnięte nienaturalnie a napisów nie da się zmniejszyć używając @media  - i mimo, że bliżej jestem to nadal nie jest to co chcę osiągnąć, szczególnie z napisami :/

Podobne pytania

0 głosów
3 odpowiedzi 804 wizyt
pytanie zadane 4 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
0 głosów
1 odpowiedź 756 wizyt
pytanie zadane 7 marca 2018 w HTML i CSS przez Jayix Użytkownik (680 p.)
0 głosów
2 odpowiedzi 269 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...