- This topic is empty.
-
AuthorPosts
-
March 26, 2015 at 9:06 am #199022
Lance
ParticipantI want a scalable, responsive image (as a whole) on the left. And a scrollable div with text on the right.
Here is an Fiddle example: https://jsfiddle.net/y7ddqd6z/
Does anybody have a solution for this? I would be very thankfull.
March 26, 2015 at 9:16 am #199026Paulie_D
MemberWhy is the whole page fixed position?
March 26, 2015 at 9:20 am #199028Lance
ParticipantOtherwise I couldn’t get the image scalable/ responsive
March 26, 2015 at 9:28 am #199030Paulie_D
MemberI’m assuming you want something like this
March 26, 2015 at 9:32 am #199033Lance
ParticipantHi, thnx for your reply. Well, no. But allmost. I wan’t the image to fill the page from top to bottom.
March 26, 2015 at 9:56 am #199034Paulie_D
MemberUpdated see previous
March 26, 2015 at 10:00 am #199035Paulie_D
MemberOr perhaps
http://codepen.io/Paulie-D/pen/WbPVoxBut the image is not really conducive for this effect.
March 26, 2015 at 10:07 am #199036Lance
ParticipantI’m sorry if I don’t explain it the right way but it has to look and behave like this (when dragging your browser bigger and wider), but with a scolling version of the text.
March 26, 2015 at 10:16 am #199037Paulie_D
MemberAbout the only think I can think of is two fixed divs…but that feels dirty somehow…
http://codepen.io/Paulie-D/pen/NPoQvR
You can’t have an image that is always 100% wide and tall of it’s parent without distortion…just isn’t possible AFAIK.
Perhaps I’m just not seeing the full effect of what you are after though.
Anyone else?
March 26, 2015 at 1:13 pm #199054randomdude
Participant@Paulie_D If you do this:
img { object-position: center center; object-fit: cover; }
I don’t think images will distort, and they can be whatever width or height you need.
March 26, 2015 at 1:35 pm #199058Paulie_D
MemberAs far as I know, even using
object-fit
, an image that’s 3×5 won’t fit an element that 2 x 6 (or whatever) fully fitting top to bottom and right to left without distortion.https://jsfiddle.net/1tsknx3L/
It’s just not possible AFAIK…something has to give somewhere.
Plus, you know Browser Support
March 26, 2015 at 2:07 pm #199060Shikkediel
ParticipantCan’t think of a solution without JavaScript. Should be easy enough if it is used though – get the width of the image and base the text div dimensions on that :
March 27, 2015 at 2:57 am #199076Lance
ParticipantI’m affraid you’re right … Thanks guys for thinking with me. I think I have to let it go en do something else. Thanks for all the help.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.