Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Row gleich hoch

Mitglied: pcguy

pcguy (Level 1) - Jetzt verbinden

02.05.2016 um 16:49 Uhr, 2508 Aufrufe, 10 Kommentare

Hallo zusammen, ich habe eine Frage betreffend bootstrap row.

Ich habe folgende Einteilung:


01.

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

10.
<div class="col-xs-3 col-md-2 ">
11.
    	<a href="7A8A2273.jpg" rel="group"  class="thumbnail fancybox myfavorites" title="test ">
12.
      	<img src="7A8A2273.jpg" class="mygallery lightSpeedIn animated" data-animate="lightSpeedIn"  alt="test" title="test">
13.
    	</a>
14.
    </div>
15.
.....
16.
 
17.
</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?
Mitglied: Pjordorf
02.05.2016, aktualisiert um 16:56 Uhr
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?

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

Gruß,
Peter

https://de.wikipedia.org/wiki/Skalierung_%28Computergrafik%29
Bitte warten ..
Mitglied: pcguy
02.05.2016 um 17:01 Uhr
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.
Bitte warten ..
Mitglied: IrunGoldstein
02.05.2016 um 17:31 Uhr
Hi pcguy,

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

Beispiel:
01.
<div class="row row-eq-height">
02.
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
03.
    some content
04.
  </div>
05.
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
06.
    kittenz
07.
  <img src="http://placekitten.com/100/100">
08.
  </div>
09.
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
10.
    some more content
11.
  </div>
12.
</div> 
Quelle:

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

Grüße
Bitte warten ..
Mitglied: pcguy
02.05.2016 um 18:58 Uhr
@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 - Klicke auf das Bild, um es zu vergrößern
Bitte warten ..
Mitglied: pcguy
04.05.2016 um 11:01 Uhr
anscheinend ist die Lösung nicht ganz einfach
Bitte warten ..
Mitglied: breakpoint
06.05.2016 um 17:32 Uhr
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
Bitte warten ..
Mitglied: pcguy
09.05.2016 um 14:12 Uhr
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?
Bitte warten ..
Mitglied: pcguy
09.05.2016 um 14:56 Uhr
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
Bitte warten ..
Mitglied: breakpoint
10.05.2016 um 09:39 Uhr
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%;
...
}
Bitte warten ..
Ähnliche Inhalte
JavaScript
Jquery: Validation for Child-Row
Frage von LorderichJavaScript1 Kommentar

Hallo zusammen, irgendwie hänge ich gerade an einem Problem fest. Ich erstelle über das Jquery Plugin Datatables eine Tabelle ...

Datenbanken
ROW-NUMBER über UNION Select
gelöst Frage von SolardubDatenbanken6 Kommentare

MSSQL 2008: Ich hatte vorher eine Abfrage, nun brauche ich zwei Select's die mit UNION gemeinsam abgefragt werden. Dazu ...

Festplatten, SSD, Raid
Unterschied SNapshot row und cow ?
gelöst Frage von TastuserFestplatten, SSD, Raid3 Kommentare

Guten Abend! Ich verstehe den Unterschied der Arten von einem Snapshot nichtkann mir das einer bitte genau erklären ? ...

Datenbanken

SQL Trigger: Komplette Row an Stored Procedure übergeben

Frage von BirdyBDatenbanken9 Kommentare

Hallo nochmal, ich habe da nochmal eine Frage zu einem SQL-Problem: Meine aktuelle Aufgabenstellung ist es, Änderungen in einer ...

Neue Wissensbeiträge
Administrator.de Feedback
Entwicklertagebuch: Die nächste Version
Information von admtech vor 9 StundenAdministrator.de Feedback4 Kommentare

Hallo Administrator User, vielleicht haben es einige User schon mitbekommen: Wir arbeiten aktuell an einer komplett neuen Version von ...

Windows Server

Active Directory ESE Version Store Changes in Server 2019

Information von Dani vor 4 TagenWindows Server

Moin, Last month at Microsoft Ignite, many exciting new features rolling out in Server 2019 were talked about. But ...

Exchange Server

Microsoft Extending End of Support for Exchange Server 2010

Information von Dani vor 4 TagenExchange Server4 Kommentare

Moin, After investigating and analyzing the deployment state of an extensive number of Exchange customers we have decided to ...

Schulung & Training

Humble Book Bundle: Network and Security Certification 2.0

Tipp von NetzwerkDude vor 4 TagenSchulung & Training

Abend, bei HumbleBundle gibts mal wider ein schönes Paket e-books: sind verschiedene Zertifizierungen wie MCSA, CCNA, CompTIA etc., für ...

Heiß diskutierte Inhalte
Visual Studio
Prüfen, ob Programm schon disposed wurde
Frage von MarcoBornVisual Studio17 Kommentare

Hallo Forum, ich habe in VB.NET ein Programm geschrieben, welches Word startet und dort Daten ausliest. Obwohl ich die ...

DNS
DNS Probleme nach Umstellung auf IPv6
Frage von thunderbird304DNS16 Kommentare

Hi Leute! Folgende Problematik: Umstieg von Glasfaser auf Telekom Buisiness DSL. Durch die Umstellung ist die FritzBox nun Gateway. ...

Netzwerkgrundlagen
Zukunftsicheres Heimnetzwerk aufbauen
Frage von CRO-WarriorNetzwerkgrundlagen15 Kommentare

Hallo Leute. Ich bin dabei das Haus in Kroatien zu renovieren. Da hab ich jetzt die Möglichkeit alles so ...

Speicherkarten
Multi USB Stick erstellen
Frage von Ghost108Speicherkarten15 Kommentare

Guten Morgen zusammen, ich würde gerne einen Multi USB Stick erstellen (bootmöglichkeit mehrer ISOs), welcher sowohl Legacy als auch ...