Flexbox - billeder
Se sidens program responsivt:
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.
|
|