WebSite X5Help Center

 
Paula J.
Paula J.
User

Hintergrundbild verzerrt sich  de

Autore: Paula J.
Visite 193, Followers 1, Condiviso 0  

Hallo zusammen,

Ich habe bei einem Textelement ein quadratisches Bild als Hintergrundbild über den Objektstil eingefügt.

Auf dem Desktop sieht alles gut aus – aber im Handy-Modus wird das Bild verzogen und erscheint rechteckig statt quadratisch.

Hat jemand eine Idee, wie ich das Hintergrundbild im mobilen Layout (und "iPad Layout) proportional anzeigen lassen kann, ohne dass es gestreckt oder verzerrt wird?

Auch die Produktbilder verziehen sich. Vielleicht hat da auch jemand eine Idee.


Danke!

Postato il
8 RISPOSTE
Daniel W.
Daniel W.
User
Utente del mese DE

Da die Text-Objekte in der responsiven Darstellung je nach Bildschirmbreite unterschiedlich breit und hoch sind, sollten die Hintergrundbilder über "Stil" eher als Muster angesehen werden.

Vielleicht könnten die CSS- bzw. Javascripten-Experten mit Code noch etwas "tricksen".

----- Beispiel -----

Leggi di più
Postato il da Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... es gibt Bild und Bild, Objekt und Objekt...
... Bilder sollten grundsätzlich mit dem Host-Objekt übereinstimmen...
... ohne LINK ist keine Auswertung möglich...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Paula J.
Paula J.
User
Autore

Funkelwelt.ch 

Leggi di più
Postato il da Paula J.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... Bilder werden im COVER-Modus automatisch angepasst...
... Um sie vollständig im rationalen Verhältnis zum Raum der Wirtszelle anzuzeigen, verwenden Sie diesen EXTRA-Code:
<style>
.im-cc-products-image {object-fit: contain !important}
</style>

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andreas S.
Andreas S.
Moderator

Du musst das responsive Design aktivieren. Das heisst unter "4" auf den Button "Responsive" drücken und dort nach der Desktopansicht beim nächsten Breakpoint die roten Haken setzen zwischen den Objekten.

Leggi di più
Postato il da Andreas S.
Paula J.
Paula J.
User
Autore

1. Das responsive Design funktioniert leider nicht – das Bild bleibt weiterhin verzerrt.

2. Wo genau muss ich den Code einfügen? Beim Bild selbst kann ich keinen Code hinterlegen. Geht das beim Textobjekt „Lachen, Spielen, Erleben“ unter CSS-Code?

Leggi di più
Postato il da Paula J.
Andreas S.
Andreas S.
Moderator

Ich würde es bei den Eigenschaften der Seite beim Reiter Erweitert - vor den <\head> Tag einfügen!

Dann hast du es zu spät gesetzt und musst es schon in der Desktop Anzeige teilen!

Leggi di più
Postato il da Andreas S.