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. |
Dann musst du max-width auf none setzen und die Breite dann auf deine gewünschte Pixelzahl.
|
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 |
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. |
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 |
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 |
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 |
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)
|
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. |
Zitat:
|
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