Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 12, 2025 at 10:17 am #1479148
    oestersund

    Dear team,
    on my Dev-page below I’ve tried to have a 2/3 + 1/3 columns section whereas the 2/3 shall be competently filled with a pic. I used the law demo , but was not able to tweak ist acc.

    PLs See “Highlight Topic 2 / Link zu Seite …”

    -> either on smaller screens the 2/3 columns gets less height / see a) inserting a pic in column
    -> or the pic (I used “original size”) is not shown completely / see b) pic as columns background

    -> How can I fix this?

    thx a lot & b best regards, Tilman

    • This topic was modified 6 days, 13 hours ago by oestersund.
    March 12, 2025 at 10:46 am #1479151
    Guenni007

    can you post the link (of your page) or to the law demo page based on your page attempt?

    That pic in your 2/3 column is placed as background-image or as an image element?

    In general, if an image is to respond to screen width and completely fill the surrounding container, the container height must match the image’s aspect ratio.

    March 12, 2025 at 2:48 pm #1479162
    oestersund

    Hi Guenni, thanks. This is a private project, and not for public sharing. sorry.

    March 12, 2025 at 2:53 pm #1479163
    Guenni007

    i understand – but what about showing me the demo-page what was the base of your page.
    f.e.: https://kriesi.at/themes/enfold-law/practice-areas/#av_section_2 – and my question if it is a background-image or as an image element?

    March 12, 2025 at 2:58 pm #1479165
    oestersund

    pls See Initial post :-)
    i´ve tried both ways

    March 13, 2025 at 3:06 pm #1479263
    Rikard

    Hi,

    I had a look at your site, but it looks like the image is already covering the 2/3 element. Did you manage to find a solution?

    Best regards,
    Rikard

    March 13, 2025 at 9:44 pm #1479280
    oestersund

    Hi Rikard,
    No – See attached Illustration for cases A and B acc. To website

    March 14, 2025 at 5:23 am #1479301
    Ismael

    Hi,

    Thank you for the screenshot.

    You may need to set the image as the background of the 2/3 column instead of using the Image element. This way, it will resize based on the height of the second column. Parts of the image may get cut off on certain screen sizes. In mobile view, you also need to define a minimum height for the 2/3 column.

    Best regards,
    Ismael

    March 14, 2025 at 7:18 am #1479310
    oestersund

    Hi Ismael,
    thx.

    this (pic as column background) (min. column height) is what I did at section b).

    Ive played then with various min. pixels (see also section c) below – but I can not force to combine “equal combine column height” with “pic fully visible @ all screen sizes”

    March 14, 2025 at 7:32 am #1479313
    Ismael

    Hi!

    Unfortunately, you won’t be able to consistently display the full image, as this depends on the size and aspect ratio of the parent container, which will vary depending on the screen resolution and size. The same applies when using the Image element — even if you manage to make it the same height as the sibling column.

    Regards,
    Ismael

    March 14, 2025 at 7:41 am #1479316
    oestersund

    HI Ismael,
    ok, I will then try to solve it e.g. via layer slider

    thx & cheers, Tilman

    March 14, 2025 at 7:44 am #1479317
    Ismael

    Hi,

    Looking forward to the solution you come up with. Thank you for your patience.

    Best regards,
    Ismael

    March 14, 2025 at 11:45 am #1479335
    Guenni007

    see

    In general, if an image is to respond to screen width and completely fill the surrounding container, the container height must match the image’s aspect ratio.

    you can see what happens if you force your desired behaviour by : object-fit: fill
    https://media.kulturbanause.de/2015/07/css-object-fit.html

    if your parent container height is set by the other content – you can have that behaviour but will distort your image.
    You can decide to have that image on object-fit: cover and then shift the important parts of the image by object-position.

    see here an object-fit: fill on “About me” with Eiffel Tower :
    https://webers-testseite.de/freelancer/#about

    the height is determined by the big content on the left side (first flex-cell) – you can not have responsive behaviour on that image by that condition.

    if you set on that img now 

    #about img {
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

    the Eiffel Tower will stay in the middle and container is filled with image – not stretched – but cropped

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.