Image height and object-fit:cover

  • Resolved stanikub

    (@stanikub)


    3 years, 3 months ago

    Hi, first of all, thank you for this plugin. It’s perfect!

    Now, we have an image that’s 4000px wide. We’d like for it to be displayed responsively across all display sizes and Elementor makes it pretty easy to set the height for different screen sizes (we have set the height of desktop image to be height: 90vh and for the mobile devices height: 57vh). We ensure correct image sizing by setting up an object-fit property to cover. (You can see it on the website)
    Is there a way to configure this within the plugin image? I can see that whenever I resize the viewport the image is kind of reloaded with new dimensions? My custom styles I set in developer tools get erased during that process.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Contributor Draw Attention Support

    (@wpdrawattention)

    Hello @stanikub,

    I’m afraid Draw Attention doesn’t have an “object-fit:cover” functionality to crop the main image based on screen size ??

    Since some hotspots could potentially be placed on the edge of the image, these would be cut off from view. Another thing to consider is that the image map is not a straightforward image that we can apply CSS to – it would break the built in resizing/responsiveness of the image if we did.

    The closest workaround would require that you create at least three different Draw Attention image maps, each with a different crop of the main image. Then you could use Elementor’s responsive mode to show a different shortcode depending on the screen size.

    The ability to create multiple Draw Attention images in the plugin is only available in the paid editions of the plugin, so if you’d like to learn more you’ll need to contact us at [email protected]

    Thanks!

Viewing 1 replies (of 1 total)
  • The topic ‘Image height and object-fit:cover’ is closed to new replies.