XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bilder nur bis zu einer gewissen größe Skalieren (http://xhtmlforum.de/showthread.php?t=73136)

moluna 02.02.2017 12:40

Bilder nur bis zu einer gewissen größe Skalieren
 
Hallo,

ich möchte auf unserer Shop Startseite die Banner für die Responsive Ansicht nur bis zu einer gewissen Größe resizen, dort sollen sie "eingefroren" werden und per overflow:hidden quasi links uns rechts beschnitten werden.

so wie es amazon.de auf seiner Startseite auch mit seinen Bannern macht.

unsere Startseite:
https://www.moluna.de/

Die Banner sind also maximal 1920 pixel breit.
wenn sich der Viewport ändert, soll der Banner sich durchaus verkleinern.
aber sind 980pixel erreicht, soll der banner anfangen links und rechts abgeschnitten zu werden.

dh unter 980 pixel sollen die mittleren 980pixel des Banners bleiben und skalieren, aber eben die seitlichen 470px links und rechts abgeschnitten werden.

ich hoffe, ich habe es irgendwie verständlich rüber gebracht.

wie gesagt, bei amazon.de sind die Banner auf der Startseite eben mit genau einer ähnlichen Funktion ausgestattet.

cloned 02.02.2017 13:20

Dann musst du max-width auf none setzen und die Breite dann auf deine gewünschte Pixelzahl.

moluna 02.02.2017 13:44

hallo,

vielen dank für das schnelle Feedback.

kannst du mir noch einmal genauer helfen.

ich habe ja 2 divs.

gallery
gallery-cell

und dann noch gallery-cell img

was muss nun welchen wert bekommen, dass es einerseits responsive ist, andererseits aber bis 980px abschneidet

danke

cloned 02.02.2017 14:05

Da es sich hier um eine kommerzielle Seite handelt mag ich nicht genauer werden, schließlich können diese Seiten es sich hoffentlich leisten fähige Entwickler zu beschäftigen.

Ein Hinweis: Du hast ein Bild. Das Bild wird auf max-width: 100% begrenzt. Das möchtest du ändern. Darauf bezieht sich mein Beitrag. Wie genau du das dann auch zufriedenstellend responsive machst ist wohl Teil des Arbeitsvertrages mit dem Inhaber des Shops.

moluna 02.02.2017 14:11

hallo, danke für das Feedback.

da es mein Shop ist, und selbst viel daran stricke, suche ich eben hier nach Rat.
Wenn du für den Rat bezahlt werden willst, ist das auch kein Problem.

Dann melde dich gerne per PM.

vielen dank schonmal

cloned 02.02.2017 15:20

Verzeih wenn meine Antwort mal etwas böse rüber kommt, ich weiß, ich schreibe ab und zu kurz und knapp, was man auch gerne etwas unhöflich interpretieren kann.

Schön, wenn man selber an seiner Seite bastelt.
Um meine Antwort von vorhin anders zu formulieren: Du hast ein img im gallery-cell. Das musst du auf max-width: none setzen (bei deinen gewünschten Screengrößen), damit es sich nicht "mit dem Bildschirm skaliert". Dann noch die gewünschte Breite (1900px) für das Bild bei den gewünschten Größen setzen. Ist es das, was du willst?

Bezüglich Behahlung kann ich mich gerne melden :P

moluna 02.02.2017 15:46

Hallo,

nein, das scheint es nicht ganz zu sein.
Mein Banner ist nun 1920 pixel Breit.
ich will, dass an jederseite maximal 470pixel abgeschnitten/nicht mehr angezeigt werden, wenn das viewport kleiner gezogen wird.

wenn nun 980pixel breite erreicht sind, sollen quasi die mittleren 980 pixel von dem 1920pixel Banner immer die 100% Bildschirm ausfüllen.

ps: gerne per pn mit Preisvorschlag.

Vielen Dank

cloned 02.02.2017 16:44

Diese maximal 470px, wie wichtig sind diese? Werden die nachkontrolliert? Also wenn du ejtzt bei 979px Breite bist, wie soll dann der halbe Pixel (den es ja nicht gibt) auf beiden Seiten abgeschnitten werden? Bzw. wie soll das Bild dann dargestellt werden? Und wie bei 600px? Oder möchtest du das Bild dann verkleinert darstellen? Dann reicht vielleicht ein scale() im CSS aus? Aber damit wirst du wahrscheinlich nie auf die exakt 470px kommen (außer mit 100-en Mediaqueries)

moluna 02.02.2017 17:49

die 470 sind nicht wichtig.
es kommt auch nicht auf pixel genau an.

ich will halt bis zu einer gewissen größe die 1920er Banner skalieren.
irgendwann wird die schrift darauf zu klein.
dann zb bei ca 980 pixel breite im viewport, soll dann der rand (alles bis auf ca 980px im inneren) abgeschnitten werden, und ab da, dann der innenteil des banners (ca 980px) weiter runter skalieren.
also unter 980 soll die seite meinen, es gäbe ein 980er bilx was es zu skalieren gibt.

cloned 03.02.2017 08:57

Zitat:

Zitat von moluna (Beitrag 550448)
also unter 980 soll die seite meinen, es gäbe ein 980er bilx was es zu skalieren gibt.

So funktioniert CSS nicht, die Seite kann nichts "meinen", du musst definieren wie sich dei 1900px Bild verhalten soll bei kleineren Auflösungen. Mir ist zwar klar, was du meinst und habe dir dafür uach schon einige Lösungsvorschläge geliefert, aber exakt so wie du es gerne hättest wird es nicht genau funktionieren. Wenn du das Verhalten von einem 800px Bild haben musst müsstest du schon das Bild gegen ein anderes austauschen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023