[Solved] Can I get a div with a fixed position to scroll

[Lance]

I 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.

[Paulie_D]

Why is the whole page fixed position?

[Lance]

Otherwise I couldn’t get the image scalable/ responsive

[Paulie_D]

I’m assuming you want something like this

http://codepen.io/Paulie-D/pen/Joxgjv

[Lance]

Hi, thnx for your reply. Well, no. But allmost. I wan’t the image to fill the page from top to bottom.

[Paulie_D]

Updated see previous

[Paulie_D]

Or perhaps
http://codepen.io/Paulie-D/pen/WbPVox

But the image is not really conducive for this effect.

https://css-tricks.com/perfect-full-page-background-image/

[Lance]

I’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.

http://codepen.io/LanceAlot/pen/gbqVmO

[Paulie_D]

About 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?

[randomdude]

@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.

[Paulie_D]

As 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

[Shikkediel]

Can’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 :

If I get the idea correctly

[Lance]

I’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.

[Author]

Posts