Kann man die Breite eines div-tags berechnen und dann dafür sorgen, dass die Bilder halb so breit sind?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Hallo zusammen,

ich wollte fragen, ob ich die Breite eines div-tags berechnen und den Bildern die Hälfte dieser Breite geben kann, sodass zwei Bilder in eine Reihe passen?
Ich benutze ein JS-Modul namens ngx-masonry in meiner Angular-Applikation und damit die Bilder wie gewollt angezeigt werden, muss ich ihnen eine fixe Breite geben.
Damit die Bilder die gesamte div-Breite einnehmen, muss ich dafür sorgen, dass die Bilder die Hälfte der Breite haben.

Die Frage ist, wie mache ich das, wenn die div-Breite in Prozent angegeben wird? Oder müsste ich die Breite in Pixel angeben und dann per Hand den Bildern die Hälfte dieser Breite geben und dann halt mit mehreren Media-Queries die Breite anpassen, wenn der Bildschirm kleiner wird?
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
Ich benutze ein JS-Modul namens ngx-masonry in meiner Angular-Applikation und damit die Bilder wie gewollt angezeigt werden, muss ich ihnen eine fixe Breite geben.

Was verstehst du unter "wie gewollt"? Und hast du einen Link zu einem Beispiel?

Wenn du die Lösung von vornherein einschränkst, obwohl das eventuell gar nicht notwendig ist, ist es schwer dir zu helfen.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Was verstehst du unter "wie gewollt"? Und hast du einen Link zu einem Beispiel?

Wenn du die Lösung von vornherein einschränkst, obwohl das eventuell gar nicht notwendig ist, ist es schwer dir zu helfen.

Also wenn die Breite des divs 600px ist und man hat 2 Bilder mit der Breite 400px und 300px. Dann würden die Bilder untereinander erscheinen und in ihrer Reihe wäre noch paar Hundert px frei. Deshalb muss man die Breite auf 300px setzen, sodass stehts 2 Bilder in einer Reihe sind und diese ausfüllen - das ist gewollt. Dass man die Breite berechnet und die Häfte dieser Breite den Bildern gibt oder ein Drittel

Hier ist eine Demo

 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
Die Bilder befinden sich jeweils in 340px breiten Containern und haben per CSS eine Breite von 100%. Die Breite der Container ist fest vorgegeben. Für zwei Bilder nebeneinander kannst du die Breite entweder auf 50% setzen oder auf 170px. Dass die Container ihre Breite ändern kann ich bei dem Beispiel nicht nachvollziehen.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Die Bilder befinden sich jeweils in 340px breiten Containern und haben per CSS eine Breite von 100%. Die Breite der Container ist fest vorgegeben. Für zwei Bilder nebeneinander kannst du die Breite entweder auf 50% setzen oder auf 170px. Dass die Container ihre Breite ändern kann ich bei dem Beispiel nicht nachvollziehen.
Das war nur ein Beispiel. Nach Veränderung der Bildschirmbreite, sollen immer noch stehts drei Bilder (in diesem Beispiel) sich in einer Reihe befinden. Also es sollte schon responsive sein. Also wenn man sagt, die Breite des div-tags sei 100% und auf dem Handy sind 100% z.B. 500px, dann sollen die Bilder alle eine Breite von 500/3px haben und wenn die 100% des divs auf dem Ipad 900px sind, sollen die Bilder 300px breit sein usw. Wenn ich den Bildern eine max und min-width von 33,33% gebe bezieht sich das jedoch nur auf die ursprüngliche Breite des Bildes und nicht des divs.
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.434
148
63
39
Minden
sebastian1012.bplaced.net
Also es sollte schon responsive sein. Also wenn man sagt, die Breite des div-tags sei 100% und auf dem Handy sind 100% z.B. 500px, dann sollen die Bilder alle eine Breite von 500/3px haben
Wenn der Container 500px hat, musst du den Bildern in der CSS doch nur das Geben
Code:
 img{
 width:calc(100% / 3);
 }
 
 bzw
 
 ngx-masonry-item.masonry-item {
    width: calc(100% / 3);
}
calc() gibt den Wert in Pixel raus
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Wenn der Container 500px hat, musst du den Bildern in der CSS doch nur das Geben
Code:
 img{
width:calc(100% / 3);
}

bzw

ngx-masonry-item.masonry-item {
    width: calc(100% / 3);
}
calc() gibt den Wert in Pixel raus

Hey, ich poste mal den html-code und den css code:

HTML:
<ngx-masonry  class="masonry">
  <div ngxMasonryItem class="masonryItem" *ngFor="let post of posts;index as idx" (click)="showPostDetail(post)" >
    <div class="crop">{{post.description}}</div>
    <img [src]="imgConstructor(post.img)">
  </div>
</ngx-masonry>

CSS:
.masonryItem {
   

   background-color: darkgoldenrod;
    border: 0.4px solid black;
    width: 20%;

}

.masonryItem img {
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
}

Das funktioniert nun, jedoch wenn ich der Klasse masonryItem eine margin von 1rem gebe passen nur noch 4 statt 5 Bilder in eine Reihe, wie bringe ich jetzt diese 1rem in die Berechnung, sodass immernoch 5 Bilder in eine Reihe passen?
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
Den border musst du dabei eigentlich auch noch berücksichtigen, wobei bei px-Angaben Nachkommastellen keinen Sinn machen. Die Browser runden Kommastellen entweder auf oder ab.

margin von 1rem bedeutet bei jedem Bild auf jeder Seite 1rem, also bei jedem Bild 2rem:

Code:
width: calc(20% - 2rem)

Um einen border von 1px auch noch zu berücksichtigen entsprechend

Code:
width: calc(20% - 2rem - 2px)

CSS-calc dient unter anderem dazu mit unterschiedlichen Einheiten rechnen zu können.
 
  • Like
Reaktionen: Tabula_Rasa

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
Weshalb eigentlich Masonry? Das macht doch nur Sinn, wenn man Container unterschiedlicher Höhe horizontal und vertikal anordnen will, ohne dass sich Lücken ergeben.

Ich würde es eher mit einem nested Grid versuchen.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Weshalb eigentlich Masonry? Das macht doch nur Sinn, wenn man Container unterschiedlicher Höhe horizontal und vertikal anordnen will, ohne dass sich Lücken ergeben.

Ich würde es eher mit einem nested Grid versuchen.

Ja, das hatte ich auch vor. Das Problem ergibt sich bei unterschiedlicher Breite. Wenn nicht genügend Bilder da sind, entstehen Lücken. Diese Lücken lassen sich verhindern, indem man den Bildern eine fixe Breite gibt. Die Höhe unterscheidet sich jedoch von Bild zu Bild und damit da keine Lücken aufgrund unterschiedlicher Höhe entstehen, benutze ich weiterhin Masonry
 

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
Den border musst du dabei eigentlich auch noch berücksichtigen, wobei bei px-Angaben Nachkommastellen keinen Sinn machen. Die Browser runden Kommastellen entweder auf oder ab.

margin von 1rem bedeutet bei jedem Bild auf jeder Seite 1rem, also bei jedem Bild 2rem:

Code:
width: calc(20% - 2rem)

Um einen border von 1px auch noch zu berücksichtigen entsprechend

Code:
width: calc(20% - 2rem - 2px)

CSS-calc dient unter anderem dazu mit unterschiedlichen Einheiten rechnen zu können.

Hey, also ich habe folgende Lösung gefunden, damit ich nicht so viel berechnen muss.

CSS:
.masonryItem{
border: 1rem solid white;
}

Ich bin mir nicht sicher, ob man solch einen Code vermeiden sollte, aber gebe ich dem border eine breite von 1rem und färbe diese weiß bzw. verwendet man für die border die Farbe des Hintergrunds, so entseht optisch eine margin von 1rem und die Anzahl an Bilder pro Reihe bleibt identisch.
 
Zuletzt bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
Heißt, du verwendest die Anweisung

Code:
box-sizing: border-box

Mit der Anweisung zusammen mit Flexbox haben einige Browser Probleme. border für margin zu mißbrauchen ist zwar nicht elegant, sollte aber funktionieren.

Im Endeffekt musst du mit der Seite zufrieden sein.
 
  • Like
Reaktionen: Tabula_Rasa
Werbung:

Neueste Beiträge