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

[Tabula_Rasa]

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]

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.

 

[Tabula_Rasa]

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

NgxMasonryDemo

ngx-masonry-demo.herokuapp.com

 

[MrMurphy]

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.

 

[Tabula_Rasa]

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.

 

[basti1012]

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

 img{
 width:calc(100% / 3);
 }
 
 bzw
 
 ngx-masonry-item.masonry-item {
    width: calc(100% / 3);
}

calc() gibt den Wert in Pixel raus

 

[Tabula_Rasa]

Wenn der Container 500px hat, musst du den Bildern in der CSS doch nur das Geben

 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:

<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>

.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]

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:

width: calc(20% - 2rem)

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

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

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

 

[Tronjer]

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.

 

[Tabula_Rasa]

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]

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:

width: calc(20% - 2rem)

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

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.

.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.

 

[MrMurphy]

Heißt, du verwendest die Anweisung

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.