logo   Flexbox - billeder




Se sidens program responsivt: x


Ved indsættelse af responsive billeder kan man komme rigtig langt ved at bruge '.img-'-selektorerne fra Bootstrap:


Billeder kan have 4 forskellige udformninger:
Alm. rektangulare
Med runde hjørner
Cirkulære
Thumbnails


img-responsive. Skal anvendes ved de tre første udformninger.
img-rounded. Skal anvendes når rektanglet skal have runde hjørner.
img-circle. Skal anvendes når rektanglet skal ombygges til en cirkel.
img-thumbnail. Skal anvendes ved billeder udformet som små thumbnails.


Det kan være nødvendigt at etablere flere versioner af en selektor: img-responsive01, img-responsive02, .. img-responsive0n.

Både i 'img-responsive' og 'img-thumbnail' kan det værte nødvendigt at tilpasse norle af værdierne. I felter med fast højde skal 'height: auto;' ændres til en højde, der ikke giver overflow.




Kode


Alm. rektangulært
CSS .img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%; /* Billedets andel af feltets bredde. */
    height: auto;
}
HTML<img class="img-responsive" src="../billeder/xxx.jpg">
Rounded
CSS .img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 6px;
}
HTML<img class="img-responsive img-rounded" src="../billeder/xxx.jpg">
Circle
CSS .img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

.img-circle {
    border-radius: 50%;
}
HTML<img class="img-responsive img-circle" src="../billeder/xxx.jpg">
Thumbnail
CSS .img-thumbnail {
    display: inline-block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .2s ease-in-out;
}
HTML<img class="img-thumbnail" src="../billeder/xxx.jpg">
Luft / positionering
Både i 'img-responsive' og i 'img-thumbnail' kan tilføjes deklarationerne:
'margin: x%;' Etablerer luft / positionering på en eller flere sider.
'float-left' eller 'float-right' venstre- eller højrestiller billedet og wrapper tekst omkring det.






















x
x