pcguy
Goto Top

Row gleich hoch

Hallo zusammen, ich habe eine Frage betreffend bootstrap row.

Ich habe folgende Einteilung:


<div class="row">   
   
    <div class="col-xs-3 col-md-2 ">  
    	<a href="7A8A2273.jpg" rel="group"  class="thumbnail fancybox myfavorites" title="test ">  
      	<img src="7A8A2273.jpg" class="mygallery lightSpeedIn animated" data-animate="lightSpeedIn"  alt="test" title="test">  
    	</a>
    </div>

<div class="col-xs-3 col-md-2 ">  
    	<a href="7A8A2273.jpg" rel="group"  class="thumbnail fancybox myfavorites" title="test ">  
      	<img src="7A8A2273.jpg" class="mygallery lightSpeedIn animated" data-animate="lightSpeedIn"  alt="test" title="test">  
    	</a>
    </div>
.....
 
</div>

Die Bilder sind responsive, da sie aber im hoch und Querformat sind, ist die Höhe unterschiedlich.
Wie habt Ihr das gelöst das alle gleich hoch sind?

Content-Key: 303486

Url: https://administrator.de/contentid/303486

Ausgedruckt am: 19.03.2024 um 07:03 Uhr

Mitglied: Pjordorf
Pjordorf 02.05.2016 aktualisiert um 16:56:04 Uhr
Goto Top
Hallo,

Zitat von @pcguy:
da sie aber im hoch und Querformat sind, ist die Höhe unterschiedlich.
Du meinst du besitzt Bilder welche nur ein Hoch oder Querformat haben? Wie sehen die denn dann aus? face-smile

Wie habt Ihr das gelöst das alle gleich hoch sind?
Entsprechend Skalieren?

Gruß,
Peter

https://de.wikipedia.org/wiki/Skalierung_%28Computergrafik%29
Mitglied: pcguy
pcguy 02.05.2016 um 17:01:22 Uhr
Goto Top
Es sind Bilder die im Hoch oder Querformat sind, die sollen auch so bleiben.
Aber in der Vorschau gibt es ein durcheinander, da die Rows durch die verschiedenen Formaten mehr oder weniger Platz einnehmen.
Mitglied: IrunGoldstein
IrunGoldstein 02.05.2016 um 17:31:43 Uhr
Goto Top
Hi pcguy,

probiere es mal mit " row-eq-height " zu deinem row dazu, in allen divs die zu berücksichtigen sind.

Beispiel:
<div class="row row-eq-height">  
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">  
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">  
    kittenz
  <img src="http://placekitten.com/100/100">  
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">  
    some more content
  </div>
</div> 

Quelle:

http://getbootstrap.com.vn/examples/equal-height-columns/

Grüße
Mitglied: pcguy
pcguy 02.05.2016 um 18:58:45 Uhr
Goto Top
@IrunGoldstein, super danke!
Das funktioniert mit dem Div super.

Allerding habe ich festgestellt das die Bilder schuld sind.

Die Querformatbilder haben col-md-2.
Auf der ersten Linie haben die Hochformat auch col-md-2, auf der zweiten col-md-1.
Beides sieht nicht schön aus.

Ich möchte das ganze responsive...also eine fixe höhe geht nicht ....
gallery_bug
Mitglied: pcguy
pcguy 04.05.2016 um 11:01:58 Uhr
Goto Top
anscheinend ist die Lösung nicht ganz einfach face-smile
Mitglied: breakpoint
breakpoint 06.05.2016 um 17:32:41 Uhr
Goto Top
Hallo pcguy

wenn es dir wichtig ist, dass jeder row gleich hoch ist, teile jedem row mit einer Klasse mit, wie hoch das row sein muss.
Im row verwendest du ein weiteres div, diesem kannst du per Klasse ein background-image geben, dass du in etwa so formatierst:


.box_img
{
background-image: url('./pfad-zum-image.jpg');
background-attachment: scroll;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 50% auto;
clear: left;
display: block;
height: 380px;
margin-right: -50%;
margin-bottom: 0px;
margin-left: -50%;
}

Somit entscheidet das von dir verwendete div, ob daraus ein Querformat oder ein Hochformat angezeigt wird.
Ein Teil vom Bild wird abgeschnitten, ok. Hier ist halt wichtig zu klären, müssen alle rows wirklich gleichhoch sein, oder können z.B. die divs in einem Row auch unterschiedlich breit sein.
Mit einem intelligenten Einsatz von
background-position: 50% 50%; (Bildmitte ist immer zentriert im div)
oder
background-position: 0% 50%; (Bildmitte ist nach oben verschoben)
kannst du kontrollieren, was vom Bild gezeigt werden soll.

Beste Grüsse
breakpoint
Mitglied: pcguy
pcguy 09.05.2016 um 14:12:29 Uhr
Goto Top
Hallo breakpoint, vielen Dank für Deine Infos!
Das klingt recht gut, aber mit einer fixen höhe ist es nicht mehr responsive ?

Oder liege ich da falsch?
Mitglied: pcguy
pcguy 09.05.2016 um 14:56:25 Uhr
Goto Top
naja, einwenig muss schon darauf geachtet werden.
Es sind ja sehr viele verschiedene Geräte die den Zugang zum Internet ermöglichen.
Früher hatten wir nur die Quall mit dem IE face-wink
Mitglied: breakpoint
breakpoint 10.05.2016 um 09:39:06 Uhr
Goto Top
Ok, hier Teil 2:
dem row gibst du mit der Klasse die Höhe. Die Klasse passt du je nach Browserbreite an, so dass die Höhe sich proportional zur Breite verändert.
Bootstrap-Media-Query-Breakpoints

und nun zu den divs im row:
pass die Klasse oben an, indem du das div immer auf 100% einstellst. Es ist damit 100% der umgebenden row-Höhe hoch.
Ändert sich im responsiven Verhalten die row-Höhe, werden die darin enthaltenen divs auf die gleiche Höhe gebracht.

.box_img
{
...
height: 100%;
...
}