Grafika w Bootstrap 3

Czas czytania: 3 minut

Bootstrap podobnie jak w przypadku przycisków posiada różne gotowe wzorce wyświetlania się ilustracji.

Znaleźć w nich można nie tylko dodanie efektu RWD do obrazków, ale również zmiana ich kształtów czy wielkości.

Nadawanie właściwości

W celu uzyskania danego efektu wystarczy użyć określonej klasy np:

• .img-rounded zaokrąglenie narożników obrazka (nie działa w IE8)
• .img-circle kształt spłaszczonego okręgu, elipsy (nie działa w IE8)
• .img-thumbnail kształt thumbnail czyli miniaturki do wpisu
• .img-responsive nadanie zdjęciu responsywności (obraz będzie się skalował, dostosowywał do szerokości strony i kontenera)

img-rounded

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="img-rounded" />

Ustawienia:

.img-rounded {
    border-radius: 6px !important;
}

---

.img-circle

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="img-circle" />

Ustawienia:

.img-circle {
    border-radius: 50% !important;
}

---

.img-thumbnail

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="img-thumbnail" />

Ustawienia:

.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

---

.img-responsive

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="img-responsive" />

Ustawienia:

.img-responsive {
    max-width:100%;
    height:auto;
}

---

Ustawianie obrazka na stronie

Do prawej:

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="rounded float-right" />

Do lewej

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="rounded float-left" />

Wyśrodkowanie

<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="rounded mx-auto d-block" />

<div class="text-center">
<img src="https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg" alt="safari" class="rounded" />
</div>

Jak prezentuje się kod CSS powyższych przykładów:

.img-circle {
    border-radius: 50%;
}
.img-rounded {
    border-radius: 6px;
}

.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

.float-left {
    float: left;
}
.float-right {
    float: right;
}

.mx-auto {
    margin-right: auto;
    margin-left: auto;
}
.d-block {
    display: block;
}
.rounded {
    border-radius: .25rem;
}

Dodatkowe tagi:
Jak wykorzystać podstawowe ustawienia Twitter Bootstrap do pracy z grafiką?
przykładowe użycia biblioteki do edycji obrazu
praca z fremwork
images bootstrap
obrazki, obrazek edycja
ilustracje RWD
obrazy dostosowujące się do rozmiarów strony
responsywne, dopasowujące się do szerokości strony