WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: helihans on March 08, 2016, 04:02:06 PM
-
hallo,
na het omzetten van html template naar responsive/bootstrap is het gebruiken van afbeeldingen wat lastig qua schaal en uitlijning.( in tabel werkt niet)
Kan natuurlijk in de css width100% en height auto meegeven maar moet dan wel gelijk de afbeeldingen in mediamap van gelijke grootte hebben.
Wat zie ik over het hoofd, zal vast iets stoms zijn.
gewoon met wysiwyg zomaar 2 afbeeldingen naast elkaar met wat tussenruimte die op smal screen ook goed in beeld komen.
ieder dank alvast, Hans
-
De simpelste manier is om de afbeelding een class te geven (b.v. w33 voor een 1/3e breedte van de container).
In CSS zet je dan een regel als:
img.w33 {
max-width: 30% !important;
height: auto: !important;
padding-right: 3%;
}
-
Als alternatief is er ook nog de multiple-columns module... 8-)
https://www.dev4me.nl/modules-snippets/opensource/bootstrap-multiple-columns/
-
Top Ruud, ga ik even mee stoeien.
de multi collumns is idd super, ben daar met ander projectje nog mee bezig en had als dank daarvoor paar maanden terug je paypal knop gebruikt ;-)
Hans
( de site nu in kwestie: www.evelyn-neeltje.nl (http://www.evelyn-neeltje.nl) )
-
Het probleem met afbeeldingen met ongelijke verhoudingen kun je ondervangen door SLIR te gebruiken. Hiermee maak je 'on the fly' een uitsnede van de foto's die altijd gelijk is, SLIR 'croppet' de foto (vanuit het center, of vanaf top, of vanaf onder, net wat je wilt en aangeeft)
Met de CSS-oplossing van Ruud zorg je vervolgens dat die gecropte afbeeldingen vervolgens weer meeschalen met je responsive site.
SLIR 2.0 vind je hier: https://github.com/lencioni/SLIR (https://github.com/lencioni/SLIR)