Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Ich mochte die aufgeräumte Bilder-Ansicht im "normalen" Business-Template doch sehr.
Unabhängig des hochgeladenen Foto-Formats, wurde jedes Bild in einem Fenster dargestellt.




Im V4 sind die Frames nicht mehr vorhanden und so sieht's auch dementsprechend "asynchron" aus.




Ingmar erarbeitete dann einen Code, um die einzelnen Fenster für die Bilder gleichbleibend anzuzeigen.

.image-box   {
   width:    220px;
}
 

Es sieht jetzt sicher etwas einladender aus, nur werden die einzelnen Bilder leider abgeschnitten.




Denke, da müsste noch ein zweiter Code her,
sodass sich die Fotos in den definierten Frame (vorgegeben vom erwähnten Code) einpassen,
wie z.B. beim ersten, gezeigten Screenshot. (Galerie_Ansicht_3)

Hat sich da evtl. schon ein "Code-Spezialist" Gedanken darüber gemacht?

Ich glaub', das hängt irgendwie mit "responsive-alt" zusammen!?

Push? #3

Zitat von Mike48 im Beitrag #5

---

Das problem ist aber nicht im V4 sondern im V6.

---

.image-box   {
   width:    220px;
}
 

img {
    height: auto;
}
 

@creator

Ja, damit werden die Bilder nicht mehr angeschnitten. Die erste "Hürde" ist also schon geschafft. Danke dir.





Je nach hoch-geladenem Bild-Format ergibt sich nun einen, oder eben keinen Rand um's Foto.
Kriegt man das auch noch gebacken?

Zitat von Mike48 im Beitrag #10

---

Da ich keinen Rahmen sehe, nehme ich an, er möchte gerne einen haben und wahrscheinlich auch etwas Abstand zwischen den Bildern.

---

Zitat von creator im Beitrag #9

---

Den Rahmen kannst du mit CSS leider nicht entfernen. Du kannst nur das Bild von Hand mit einem Grafikprogramm bearbeiten und den Rahmen manuell entfernen.

---

Habe den Code noch etwas verfeinert und ergänzt.
Denke, so könnt' man es stehen lassen.





Allerdings erreiche ich mein Ziel "Foto im Fenster einmitten" auch mit dem ".flex" nicht ganz.
Möglich, dass das Eine, das Andere aushebelt.

.gallerypic {
  text-align: center !important;
  border: 0.1em solid #e1e1e1;
padding: 1.0em !important;  
}
.img-responsive-alt {
    width: 100%;
    height: auto !important;
}
.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.image-box {
  width: unset !important;
}