Scaling image box pinned to browser top left

Report · Feb 06, 2017

I have an image box pinned to the browser top left. When I resize the browser, the image scales proportionally to the change in the browser window. Since my image in not located at the top left of the brower, but to the right of a menu, the image scales slower than the browser changes and the browser edge cuts into the image before it should really have to. I have tried to figure out a way to embed the image box in another larger image box that would scale proportionally with the browser window but I can't figure out how to make it work or if it is even really possible. One suggestion was putting a image box with a solid behind the image but it just seems to cut into that box prematurely as well. I would appreciate any suggestions for how I might be able to make the image scale properly.

If I am not being clear think of an image that is originally 720 x 405 and is placed at X: 235, Y: 85. I have designed the layout with a maximum page width of 1055, which gives a nice white margin to the right of the image. If the browser window scaled to 50% and the top left of the image stays at X: 235 the edge of the browser window ends up at 523 which means the image should be 523 - 235 or 288 pixels wide. Since it has scaled only 50% it is 360 pixels wide. I'd like to make it scale to 288.

Report · Feb 07, 2017

Hi,

It would be helpful if we can a test URL of your site.

If you haven't uploaded it yet please do it on Business Catalyst and share the URL with us so we can have a look at.

Regards,

Ankush

Report · Feb 07, 2017

I'll send you the Muse file via email, but I am not ready to upload the work in progress to any site where it could be viewed since it is my client's webpage and he does not want it uploaded anywhere until it is finished and can go on his own website.

The issue is really a conceptual one that does not need to be seen to be understood. I has to do with the fact that responsive pages scale all their contents to the same percentage based on the resize of the browser window. Since my image is placed at X: 235 Y: 85, I need to coerce it to scale at a different rate in order to get the optimal layout as the browser window gets smaller. I believe CSS frames might permit this, but I don't know. In any case I suspect the only solution is to set several breakpoints and resize every image individually at every breakpoint. I was hoping I could embed the image in another box that would scale in a way that made its contents scale more appropriately.

Thanks.

Report · Feb 07, 2017

Here’s the project where you can see the issue as you resize the browser window down on the home page.

Richard Patterson

135 S Medio Drive

Los Angeles, CA 90049-3935

Home: 310 472-8065

Cell: 310-709-6786

richard@rgpost.com

Report · Feb 07, 2017

It looks like you have missed the link here, However, you can share the link with me in a "Private Message".

For doing a PM just hover the mouse on my user id and click "message"