10
Row gleich hoch
Hallo zusammen, ich habe eine Frage betreffend bootstrap row.
Ich habe folgende Einteilung:
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?
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?
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 303486
Url: https://administrator.de/contentid/303486
Ausgedruckt am: 21.11.2024 um 22:11 Uhr
10 Kommentare
Neuester Kommentar
Hallo,
Du meinst du besitzt Bilder welche nur ein Hoch oder Querformat haben? Wie sehen die denn dann aus?
Gruß,
Peter
https://de.wikipedia.org/wiki/Skalierung_%28Computergrafik%29
Du meinst du besitzt Bilder welche nur ein Hoch oder Querformat haben? Wie sehen die denn dann aus?
Wie habt Ihr das gelöst das alle gleich hoch sind?
Entsprechend Skalieren?Gruß,
Peter
https://de.wikipedia.org/wiki/Skalierung_%28Computergrafik%29
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.
Aber in der Vorschau gibt es ein durcheinander, da die Rows durch die verschiedenen Formaten mehr oder weniger Platz einnehmen.
Hi pcguy,
probiere es mal mit " row-eq-height " zu deinem row dazu, in allen divs die zu berücksichtigen sind.
Beispiel:
Quelle:
http://getbootstrap.com.vn/examples/equal-height-columns/
Grüße
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
@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 ....
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 ....
anscheinend ist die Lösung nicht ganz einfach
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
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
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?
Das klingt recht gut, aber mit einer fixen höhe ist es nicht mehr responsive ?
Oder liege ich da falsch?
Hallo,
Na wenn du als Entwickler einer Responsive Website es schon nicht verstehst
https://de.wikipedia.org/wiki/Responsive_Webdesign
https://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign
https://en.wikipedia.org/wiki/Responsive_web_design
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-s ...
https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
https://managewp.com/new-website-design-case-study
Warum mag ich kein Responsive Design.....
Gruß,
Peter
Na wenn du als Entwickler einer Responsive Website es schon nicht verstehst
https://de.wikipedia.org/wiki/Responsive_Webdesign
https://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign
https://en.wikipedia.org/wiki/Responsive_web_design
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-s ...
https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
https://managewp.com/new-website-design-case-study
Warum mag ich kein Responsive Design.....
Gruß,
Peter
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
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
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%;
...
}
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%;
...
}
