# Produktdetail Optionen Bildgröße

**URL:** <https://forum.shopware.com/t/produktdetail-optionen-bildgroesse/104343>\
**Category:** Programmierung\
**Created:** [21. Juni 2024 um 08:12 UTC](https://forum.shopware.com/t/produktdetail-optionen-bildgroesse/104343 "2024-06-21T08:12:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![flo1](https://avatars.discourse-cdn.com/v4/letter/f/a4c791/32.png) [@flo1](https://forum.shopware.com/u/flo1)\
**Post date:** [21. Juni 2024 um 08:12 UTC](https://forum.shopware.com/t/produktdetail-optionen-bildgroesse/104343/1 "2024-06-21T08:12:41Z")

</div>

Hallo! Die Bilder, die als Produkt-Optionen im Artikel angezeigt werden können, sind für meine Zwecke leider etwas klein. Ich hatte nun versucht, die Bildgröße über CSS anzupassen. Leider zerschießt es dann komplett das Template. Hat jemand eine Idee? Herzlichen Dank!

---

<div class="post-metadata">

**Author:** ![graffito](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/graffito/32/24053_2.png) [@graffito](https://forum.shopware.com/u/graffito)\
**Post date:** [21. Juni 2024 um 11:09 UTC](https://forum.shopware.com/t/produktdetail-optionen-bildgroesse/104343/2 "2024-06-21T11:09:23Z")

</div>

Kannst du uns eine Url nennen? Dann tun wir uns leichter - sonst wird es schwierig 🙂

LG Andi

---

<div class="post-metadata">

**Author:** ![flo1](https://avatars.discourse-cdn.com/v4/letter/f/a4c791/32.png) [@flo1](https://forum.shopware.com/u/flo1)\
**Post date:** [21. Juni 2024 um 12:59 UTC](https://forum.shopware.com/t/produktdetail-optionen-bildgroesse/104343/3 "2024-06-21T12:59:24Z")

</div>

Die Seite ist noch nicht online, daher ging das nicht. Dennoch vielen Dank. Mittlerweile hat es jetzt genau so geklappt, wie ich mir das erhofft habe:

CSS-Code:

.product-detail-configurator-option-label.is-combinable.is-display-media {  
width: 200px; /\* Vergrößere die Breite nach Bedarf _/  
height: auto; /_ Passt die Höhe automatisch an _/  
padding: 10px; /_ Fügt einen Innenabstand hinzu _/  
display: flex; /_ Stellt sicher, dass der Inhalt flexibel ist _/  
align-items: center; /_ Zentriert den Inhalt vertikal _/  
justify-content: center; /_ Zentriert den Inhalt horizontal _/  
box-sizing: border-box; /_ Bezieht Padding in die Breite und Höhe ein \*/  
}

.product-detail-configurator-option-image {  
width: 100%; /\* Passt die Bildbreite an die Containerbreite an _/  
height: auto; /_ Erhält die Proportionen des Bildes \*/  
}