Fixed Image Size/Scaling/Orientation

Design help General
1

Hi Everyanyone

So I acknowledge, I am a relative noob. Some long past Dreamweaver times. I’m figuring stuff out but:

With a fixed image section: To make the section the sort of size I want in desktop mode, I’ve set the height in pixels. I’m okay with how it comes out in other formats, but I’d like to be able to customise that. Is that possible? But the more important issue/question is:::

In different formats, the image doesn’t seem to scale, it is just zoomed in on, and it always zooms to the top left of the images (not the best part).

  1. Can it scale instead and how?
  2. Can I select the part or side of the image that gets zoomed in upon?

Hope that’s clear, looking forward to replies,

Jon

Here is my site Read-Only: https://preview.webflow.com/preview/originalrenovationdesign?preview=caff4c10110ddb89a281948b21efb0a5

2

Hi. Its hard to understand your Q issue. Do you have any example/webflow/codepen?

“image scale” is a very general term.

You talk about <img> element or background-image - also what is “zoom” (Browser zoom ctr+?)

Add this (or url .io)

3

Hi

Thanks for helping and sorry for the non-shared link, corrected above and also here it is

or background-image - I just dropped an image into a fixed images section - I’m guess that was somehow wrong - should it have been in a container?

I’m not talking about manually zooming - I mean scaling - the image doesn’t seem to scale for different platforms, it just zooms/focusses in on the top left of the image. Does that make more sense? I guess you’ll see more from the link now.

Jon

4

First your “fixed image section” position is auto.

Next, this is bg-image. If you want you can use background-attachment: fixed:

You find this on webflow - follow this tuturial (read “Fixed/Scroll” section)

About sizing - (read about “Size” in the link above) + google/youtube it)

Nice example:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Last: This is not a rule - but most of the time for hero-images you use - size: cover – position: 50%; 50%; - Tile: X (no-repeat)

5

Hi Siton

So sorry for the hugely long delay in replying. I somehow half solved it and have just been flat out, but actually this info is more what I needed, I think I’ve tightened it up and it’s working properly.

Many thanks for your help.

Jon

6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.