Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 8, 2021 at 4:45 pm #1332006
    adibranch

    Hi all, i need to set an image holder to work in the same way as a background image. It needs to be :
    100% full width of browser
    70% of browser height

    Image needs to crop/adjust when browser is resized.
    Basically, it needs to work the same way as the image at the top of this page. which is currently done with a background-image. Buti need to do with with an actual img .

    https://www.dannahcottages.co.uk/cottages/heather/

    any ideas?

    • This topic was modified 3 years ago by adibranch.
    December 9, 2021 at 2:30 pm #1332140
    Ismael

    Hey adibranch,

    Thank you for the inquiry.

    There are a lot of images and galleries in the home page. Which specific element are you trying to adjust? Please provide a screenshot (on imgur or dropbox) of the section or image that you would like to adjust, including a mockup of the changes if possible.

    Best regards,
    Ismael

    December 17, 2021 at 4:58 pm #1333273
    adibranch

    Sorry, i meant the top image, the one of the outside of the house.

    That image is current generated with a background image on a colour section. I need to use an actual image holder, and still achieve the same full width and object-fit effect.

    December 20, 2021 at 7:04 am #1333489
    Ismael

    Hi,

    Thank you for the clarification.

    You can set the color section’s content container width to 100%. Please check the documentation for more info.

    // https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width

    Best regards,
    Ismael

    December 22, 2021 at 7:33 pm #1333783
    adibranch

    Indeed, and thats what’s already done :)
    But, what i want to do is recreate the same full width, 70% height image but using an actual image in a placeholder, rather than a background image on a container.

    December 26, 2021 at 3:29 am #1333993
    Ismael

    Hi,

    Thank you for the info.

    We could define the minimum and maximum height of the image but it might get distorted on certain screen sizes. If that is not a problem, try try this css code.

    img.wp-image-3530.avia-img-lazy-loading-not-3530.avia_image {
    height: 50vh !important;
    max-height: 50vh !important;
    min-height: 50vh !important;
}

    You may need to apply a custom css class name or ID to the image element and replace the css selector above.

    Best regards,
    Ismael

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