WebSite X5Help Center

 
Karl B.
Karl B.
User

Bild im Zeilenstil anpassen  de

Auteur : Karl B.
Visité 1505, Followers 1, Partagé 0  

Ich möchte das ein Bild im Zeilenstil zwar auf Browserbreite, aber nicht so groß angezeigt wird. Link

Im Zeilenstil sehe ich keine Möglichkeiten hierfür, weshalb ich davon ausgehe, dass das Bild mit einem Grafikprogramm bearbeitet werden muss, aber wie?

Posté le
50 RéPONSES - 8 UTILE - 1 CORRECT
Klaus W.
Klaus W.
User

Hallo Karl,

was meinst du mit 'groß' ? Meinst du damit, dass das Foto eigentlich links und rechts mehr von der 'Umgebung' der Schreibmaschine enthält, hier aber nur die Schreibmaschine zeigt ... wie hineingezommt ? 

Lire plus
Posté le de Klaus W.
Karl B.
Karl B.
User
Auteur

Ja, ich möchte, dass die Schreibmaschine weiter nach hinten angezeigt wird. 

Lire plus
Posté le de Karl B.
Andreas L.
Andreas L.
User

Wie groß ist dein Bild den?

Lire plus
Posté le de Andreas L.
Karl B.
Karl B.
User
Auteur

1920x1280 px, aber auch bei 640x427 px ist die Schreibmaschine zu sehr im Vordergrund.

Lire plus
Posté le de Karl B.
Klaus W.
Klaus W.
User

Aus meiner Sicht wird der Bildausschnitt völlig korrekt dargestellt. Der Bereich darüber und darunter wird nicht angezeigt, da das Objekt davor eine geringere Höhe als das Foto besitzt:

Lire plus
Posté le de Klaus W.
Karl B.
Karl B.
User
Auteur

Ja, aber dafür möchte ich nicht unbedingt das Objekt Animated Image für 16 Credits kaufen. Trotzdem vielen Dank für deinen Hinweis.

Lire plus
Posté le de Karl B.
Klaus W.
Klaus W.
User

Musst du doch nicht. Um mehr vom Foto zu sehen kannst du doch die Ränder über und unter dem davor liegenden Objekt erweitern ?!:

Lire plus
Posté le de Klaus W.
Cookie G.
Cookie G.
User

Mit Simple Separator geht auch aber nicht so perfekt wie mit Objekt Animated Image...

Lire plus
Posté le de Cookie G.
Klaus W.
Klaus W.
User

... oder ein HTML-Objekt:

Ich lerne gerne dazu. Was kann denn das 'Animated Image' hier besser ausrichten ?

Lire plus
Posté le de Klaus W.
Karl B.
Karl B.
User
Auteur
Klaus S.
Um mehr vom Foto zu sehen kannst du doch die Ränder über und unter dem davor liegenden Objekt erweitern ?!:

Das ist natürlich richtig, hilft aber leider nicht weiter. Vielleicht habe ich mein Vorhaben auch nur missverständlich formuliert. Ziel ist es, dass die Schreibmaschine, ob ganz oder teilweise sichtbar, am PC, Tablet und Handy weiter hinten (kleiner) sichtbar ist. Ist das eventuell mit Photoshop realisierbar, wenn ja wie?   

Lire plus
Posté le de Karl B.
René W.
René W.
User

Ich bearbeite, wenn nötig, die Fotos mit Adobe Photoshop.
Dort sind sämmtliche Anpassungen machbar.
Sicher braucht es damit auch etwas Übung.

Lire plus
Posté le de René W.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Am besten du öffnest das Foto in einem Bildbearbeitungsprogramm und machst einen Ausschnitt mit 2000px mal 300px und fügst dieses Foto ein.

Lire plus
Posté le de Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Karl B.
... ... ...  Ziel ist es, dass die Schreibmaschine, ob ganz oder teilweise sichtbar, am PC, Tablet und Handy weiter hinten (kleiner) sichtbar ist. Ist das eventuell mit Photoshop realisierbar, wenn ja wie?   

(It > De)  ... die Abmessungen des Bildes sind weder wichtig noch die Modifikation des Bildes (!), sondern das Seitenverhältnis (3: 2) in Bezug auf die Linie und konditioniert durch das CSS COVER, und es ist besser, zum Beispiel kleinere Maße zu verwenden Dies könnte auch für alle Definitionen in Ordnung sein:
https://cdn.pixabay.com/photo/2020/06/09/19/09/vat-5279689_960_720.jpg
... daher sollten Sie für einen guten Kompromiss EXTRA-Code in CSS media_query verwenden...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur
 ‪ KolAsim ‪ ‪
... daher sollten Sie für einen guten Kompromiss EXTRA-Code in CSS media_query verwenden...

Wie müsste der Code lauten?

Lire plus
Posté le de Karl B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... ungefähr könnten Sie mit diesem Code unterbringen und ihn personalisieren:

<style>
@media (min-width: 1150px) {
#imPageRow_1, #imPageRow_1 div { height:800px !important }}
@media (max-width: 1149px) {
#imPageRow_1, #imPageRow_1 div {height:600px !important }}
@media (max-width: 719px) {
#imPageRow_1, #imPageRow_1 div {height:400px !important }}
@media (max-width: 479px) {
#imPageRow_1, #imPageRow_1 div {height:250px !important }
#imCell_1, #imCell_1 *{max-height:0px !important; line-height:120px !important }}
</style>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur

Es geht nicht um die Bildgröße, sondern darum das Bild für alle Geräte (PC, Tablett, Handy) so darzustellen, dass die Schreibmaschine! nicht die ganze Zeile ausfüllt, sondern mehr nach hinten erscheint und mehr vom Umfeld zu sehen ist.

Lire plus
Posté le de Karl B.
Cookie G.
Cookie G.
User

Ich frage mich wieso INCO es nicht hinbekommt, wenn es mit einem Objekt wie Animated Image funktioniert... wo von Ihnen gemacht worden ist yell  

Lire plus
Posté le de Cookie G.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Es kann so nicht funktionieren, weil das Bild so dargestellt ist mit der Schreibmaschine!  Dieses Bild ist nicht reingezoomt und kann nicht einfach rausgezoomt werden wenn keine Fläche vorhanden ist.  Wenn die sichtbare Fläche nur als "Ausschnitt" so dargestellt wäre, (wie es jetzt zu sehen ist) dann kann es auch rausgezoomt werden.

Außerdem bei der CSS MEthode wäre das Foto gequetscht zu sehen.

Lire plus
Posté le de Andreas S.
Cookie G.
Cookie G.
User

Hallo Andreas

Das Bild ist zwar kleiner und so wie du sagst zerquetscht... aber vollständig vorhanden... und auf dem Handy noch immer gross genug... Kannst ja mal meine Homepage auf dem Handy nachschauen.

PS: Nicht böse sein... aber so funktioniert es.

Cookie 

Lire plus
Posté le de Cookie G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Karl B.
Es geht nicht um die Bildgröße, sondern darum das Bild für alle Geräte (PC, Tablett, Handy) so darzustellen, dass die Schreibmaschine! nicht die ganze Zeile ausfüllt, sondern mehr nach hinten erscheint und mehr vom Umfeld zu sehen ist.

... es ist eine Frage der Logik, verglichen mit dem, was ich vorher gesagt habe und das Programm gut zu kennen...
... dazu wäre der EXTRA-Code nicht erforderlich:

<style>
#imPageRow_1 div { background-size:60% !important }
</style>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Klaus W.
Klaus W.
User

@Cookie: Karl hat die Sache ja auf den Zeilenstil beschränkt und da ist es genau so wie Andreas bereits versucht hat zu erklären. Da ist nichts im Stretching und Stauchen. Allerdings ist der Vorteil des Zeilenstils, dass er wie ein Layer funktioniert und beliebige Objekte davor platziert werden können.

Allerdings ist dein Lösungsansatz in dieser Sache (für mich) durhaus sehr hilfreich ... auch als Basis für andere Designideen.  Kannst du mal alle Parameter (ggf. Screenshots) nennen, die zu deinem Ergebnis geführt haben ?

Lire plus
Posté le de Klaus W.
Cookie G.
Cookie G.
User

Hallo Klaus

Ich habe es so gemacht...

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

+

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

+

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

+

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

und

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

Mein Bild ist 1250x500 px

Lire plus
Posté le de Cookie G.
Karl B.
Karl B.
User
Auteur

@ KolAsim ‪ ‪

Das ist ein sehr guter Ansatz, aber wieso ist ab der Auflösung 720 px oberhalb der ersten Zeile ein Leerraum, obwohl ich die Headerhöhe auf null gesetzt habe? Link

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Tja, das ist das dynamische Design vermischt mit WSX5 Einstellungen!

SChreibe noch diesen Code hinzu zur #imPageRow_1 div  Anweisung..

background-position: top!important;

Wenn das nicht geht dann...

<style>

#imPageRowGraphics_1 {background-position: top!important;}

</style>

Lire plus
Posté le de Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Karl B.
@ KolAsim ‪ ‪ Das ist ein sehr guter Ansatz, aber wieso ist ab der Auflösung 720 px oberhalb der ersten Zeile ein Leerraum, obwohl ich die Headerhöhe auf null gesetzt habe? Link

... ein guter Kompromiss:

<style>
#imCell_1 * {max-height:0px !important; }
#imPageRow_1 div { background-size:100% !important; background-position: top !important }

@media (min-width: 1150px) {
#imPageRow_1, #imPageRow_1 div { height:600px !important }
#imCell_1 *{ line-height:600px !important }}
@media (max-width: 1149px) {
#imPageRow_1, #imPageRow_1 div {height:500px !important }
#imCell_1 *{ line-height:500px !important }}
@media (max-width: 719px) {
#imPageRow_1, #imPageRow_1 div {height:350px !important }
#imCell_1 *{line-height:350px !important }}
@media (max-width: 479px) {
#imPageRow_1, #imPageRow_1 div {height:200px !important }
#imCell_1 *{line-height:200px !important }}
</style>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Klaus W.
Klaus W.
User

@ Cookie ... alle: Ich steh' ein wenig auf dem Schlauch. Was bringt das Animated-Image-Objekt in diesem Zusammenhang ? Es ist doch leer !?! Ein HTML-Objekt mit Höhenangabe hätte es z.B. auch getan !?! 

Lire plus
Posté le de Klaus W.
Cookie G.
Cookie G.
User

@ Klaus

Mit dem HTML Objekt geht es nicht so gut, zumindestens bei mir. 

Lire plus
Posté le de Cookie G.
Cookie G.
Cookie G.
User

Sowieso wenn du als Hintergrund eine Bilderliste hast.

Lire plus
Posté le de Cookie G.
Klaus W.
Klaus W.
User

Ok. Wie hast du das umgesetzt ? Handelt es sich um eine einzige Bilddatei mit zwei Bildern als Parallaxe ?

Lire plus
Posté le de Klaus W.
Cookie G.
Cookie G.
User

Das ist ein Bild wo ich im Fotoshop gebastelt habe.

Lire plus
Posté le de Cookie G.
Karl B.
Karl B.
User
Auteur

@Andreas S. und KolAsim ‪ ‪

Vielen Dank, ich werde das am Wochenende testen.

Lire plus
Posté le de Karl B.
Karl B.
Karl B.
User
Auteur

Funktiioniert einwandfrei, aber leider nicht wenn der Efekt "Paralaxe fix" im Zeilenstil aktiviert ist. Link!

Lire plus
Posté le de Karl B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Karl B.
Funktiioniert einwandfrei, aber leider nicht wenn der Efekt "Paralaxe fix" im Zeilenstil aktiviert ist. Link!

>> >> >>

<style>
#imPageRow_1,#imPageRow_1 div { background-size:100% !important; background-position: top !important;top:0px !important}
@media (min-width: 1150px) {
#imPageRow_1, #imPageRow_1 div { height:600px !important }
#imCell_1,#imCell_1 * {height:0px !important; padding:0px !important }
#imCell_1 *{ line-height:600px !important }}
@media (max-width: 1149px) {
#imPageRow_1, #imPageRow_1 div {height:500px !important }
#imCell_1,#imCell_1 * {height:0px !important; padding:0px !important }
#imCell_1 *{ line-height:500px !important }}
@media (max-width: 719px) {
#imPageRow_1, #imPageRow_1 div {height:350px !important }
#imCell_1 *{line-height:350px !important }}
@media (max-width: 479px) {
#imPageRow_1, #imPageRow_1 div {height:200px !important }
#imCell_1 *{line-height:200px !important }}
</style>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur

Das Textobjekt 1 wird beim scrollen verschoben und ab der Auflösung 480 px ist der graue Hintergrund am unteren Rand des Bildes zu sehen. Link!

Lire plus
Posté le de Karl B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... Aufmerksamkeit, Sie haben das Bild geändert oder modifiziert; ... wiegt zu viel, 1,2 MB; ... und sollte maximal 1/5 ° wiegen...
___________________________________

<style>
@media (min-width: 1150px) {
#imPageRow_1,#imPageRow_1 div { background-size:100% !important; background-position: top !important;top:0px !important;height:600px !important}
#imCell_1,#imCell_1 * {height:0px !important; padding:0px !important }
#imCell_1 * { line-height:600px !important }}
@media (max-width: 1149px) {
#imPageRow_1,#imPageRow_1 div { background-size:1149px !important; background-position: top !important;top:0px !important;height:500px !important}
#imCell_1,#imCell_1 * {height:0px !important; padding:0px !important }
#imCell_1 * { line-height:500px !important }}
@media (max-width: 719px) {
#imPageRow_1,#imPageRow_1 div { background-size:719px !important; background-position: top !important;top:0px !important;height:350px !important}
#imCell_1 * {line-height:350px !important }}
@media (max-width: 479px) {
#imPageRow_1,#imPageRow_1 div { background-size:479px !important; background-position: top !important;top:0px !important;height:200px !important}
#imCell_1 * {line-height:200px !important }}
</style>

.

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur

Perfekt! Vielen Dank! 

Die Bilder sollten jetzt kleiner sein!? Link!

Auf dem Handy (Iphone) funktioniert Paralaxe nicht!?

Lire plus
Posté le de Karl B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... OK ... ... funktioniert bei mir, aber es ist nicht i(!)!
... 1 - horizontal + refresh > OK Parallaxe >> 2 - vertikal > OK Parallaxe ...

 - 1.1 MB (!)  >> max 100-(200) KB

.

ciao wink

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur

Jetzt sollte das Bild 265 KB groß sein Link!

Parallaxe funktioniert nicht mit Safari! Mit Android?

Wo kann ich die tatsächliche Bildgröße ablesen/sehen?

Lire plus
Posté le de Karl B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... OK ... OK ... 294 KB ... OK ...
... Ich kenne keine Safari und ich denke nicht darüber nach, da ich nicht über i(!)  Nachdenke ...
... jedoch gemäß den Warnungen von Icm ist Parallaxe auf "mobile" Geräten vom Programm ausgeschlossen...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Karl B.
Karl B.
User
Auteur

Alles klar und nochmals für vielen Dank!

Lire plus
Posté le de Karl B.
Karl B.
Karl B.
User
Auteur

@ KolAsim

Gibt es eine Möglichkeit dieses Problem zu lösen?

Lire plus
Posté le de Karl B.