login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Bootstrap image height het zelfde in verschillende columns (Opgelost)

Offline GroundZero - 29/06/2016 13:14 (laatste wijziging 29/06/2016 13:33)
Avatar van GroundZeroLid Beste,

ik heb de volgende code:

  1. <div class="row">
  2. <div class="col-xs-12 col-sm-8 col-md-8 margin-top-12">
  3. <img src="/images/xxx/xxx-nl.png" alt="" width="100%" />
  4. </div>
  5. <div class="col-xs-12 col-sm-4 col-md-4 margin-top-12">
  6. <img src="/images/xxx/pre-sale.png" alt="" width="100%" />
  7. </div>
  8. </div>


Het probleem nu is echt dat op een groot scherm de hoogtes perfect zijn maar als ik kleiner ga schalen dat de linker image (xxx-nl.png) hoger blijft als de image er naast.

Ik wil juist dat de hoogte ten alle tijden het zelfde blijft.

Is dit mogelijk met bootstrap of gaat dit niet lukken? hopelijk kan iemand mij helpen met dit probleem, zal wel een simpele oplossing zijn maar loop hier al enig tijd mee rond 

EDIT: Heb de oplossing gekregen van iemand De bootstrap setting overschijven en nu werkt het perfect. Van pixels naar percentages dus.

  1. .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  2. padding-right: 1%!important;
  3. padding-left: 1%!important;
  4. }

1 antwoord

Gesponsorde links
Offline Jointjeff - 29/06/2016 13:35 (laatste wijziging 29/06/2016 13:36)
Avatar van Jointjeff HTML interesse Dat is logisch want de afbeelding schaalt mee met de breedte van de kolom.

Voorbeeld: https://jsfiddle.net/Ln842j9d

Dus of je moet de kolommen aanpassen of de afmeting van de afbeelding.

Edit: zie dat je al een oplossing hebt. Kennelijk heb ik het probleem totaal verkeerd begrepen.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.174s