Bild im Zeilenstil anpassen 
Author: Karl B.
Visited 1508,
Followers 1,
Shared 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?
Posted on the
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 ?
Author
Ja, ich möchte, dass die Schreibmaschine weiter nach hinten angezeigt wird.
Wie groß ist dein Bild den?
Author
1920x1280 px, aber auch bei 640x427 px ist die Schreibmaschine zu sehr im Vordergrund.
Author
Bildquelle: https://pixabay.com/de/photos/mehrwertsteuer-umsatzsteuer-5279689/
Willst du dass das Bild auf Tablett oder Handy sichtbar ist?
Ich habe es so gemacht...
https://unofficialwsx5.de/thread/4997-hintergrundbild-im-zeilenstil-responsiv-ohne-skripte/
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:
Author
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.
Musst du doch nicht. Um mehr vom Foto zu sehen kannst du doch die Ränder über und unter dem davor liegenden Objekt erweitern ?!:
Mit Simple Separator geht auch aber nicht so perfekt wie mit Objekt Animated Image...
... oder ein HTML-Objekt:
Ich lerne gerne dazu. Was kann denn das 'Animated Image' hier besser ausrichten ?
Schau mal bei mir mit Animated Image geht sogar mit Bilderliste...
https://www.hotel-gabriel.ch/willkommen.html
Author
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?
Ich bearbeite, wenn nötig, die Fotos mit Adobe Photoshop.
Dort sind sämmtliche Anpassungen machbar.
Sicher braucht es damit auch etwas Übung.
Am besten du öffnest das Foto in einem Bildbearbeitungsprogramm und machst einen Ausschnitt mit 2000px mal 300px und fügst dieses Foto ein.
(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...
.
Author
Wie müsste der Code lauten?
... 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>
.
Author
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.
Ich frage mich wieso INCO es nicht hinbekommt, wenn es mit einem Objekt wie Animated Image funktioniert... wo von Ihnen gemacht worden ist
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.
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
... 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>
.
@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 ?
Hallo Klaus
Ich habe es so gemacht...
+
+
+
und
Mein Bild ist 1250x500 px
Author
@ 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
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>
... 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>
.
@ 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 !?!
@ Klaus
Mit dem HTML Objekt geht es nicht so gut, zumindestens bei mir.
Sowieso wenn du als Hintergrund eine Bilderliste hast.
Ok. Wie hast du das umgesetzt ? Handelt es sich um eine einzige Bilddatei mit zwei Bildern als Parallaxe ?
Das ist ein Bild wo ich im Fotoshop gebastelt habe.
Author
@Andreas S. und KolAsim
Vielen Dank, ich werde das am Wochenende testen.
Author
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>
.
Author
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!
... 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>
.
.
Author
Perfekt! Vielen Dank!
Die Bilder sollten jetzt kleiner sein!? Link!
Auf dem Handy (Iphone) funktioniert Paralaxe nicht!?
... OK ... ... funktioniert bei mir, aber es ist nicht i(!)!
... 1 - horizontal + refresh > OK Parallaxe >> 2 - vertikal > OK Parallaxe ...
.
ciao
.
Author
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?
... 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...
.
Author
Alles klar und nochmals für vielen Dank!
Author
@ KolAsim
Gibt es eine Möglichkeit dieses Problem zu lösen?
...
... >> https://helpcenter.websitex5.com/en/post/239065#comment6