Full width image

[nnemmers1]

I would like to insert an image that scales to full width of the page and scales the height and width appropriately as the browser size changes.  I do not want this as a background image of a section, I simply want the image to scale proportionally to 100% width on the page.  I don't see how to do that with any of the modules.  Please help.

Add New Note to this Reply

[Jackie]

Hi again.

I have checked and used the fullwidth image for the single image shortcode on this page.

http://00a.cd6.myftpupload.com/check-image-fullwidth/

1. You should use a large image.

2. Set the row setting layout to full width.

3. Set page layout fullwidth.

Please check it again.

Thanks.

Add New Note to this Reply

[nnemmers1]

This reply has been marked as private.

Add New Note to this Reply

[nnemmers1]

I think I see what you did here, but it's not fixing the actual issue.  I want the image to scale to 100% width on ANY screen size.  All you're doing is using a very wide image so that on normal screen sizes and lower, it appears to be scaling to 100% when it's actually not, it's actually displaying the image SMALLER than 100% because the screen width is smaller than the actual width of the photo.  Correct? So on very large screens, it won't actually display full width.  Seems like there should be a simple solution for this given it's very common practice.

Add New Note to this Reply

[Jackie]

Hi again.

Yes, we have added the custom CSS and custom class to help you make the full-width image for the single image shortcode.

You need to add the extra class: full-width to the single image shortcode as you want full-width.

The custom CSS below:

.full-width img,
.full-width .vc_single_image-wrapper,
.full-width .vc_figure {
    width: 100%;
}

Please check it again.

Thanks.

Add New Note to this Reply

[nnemmers1]

I don't understand why it doesn't work on the photo at the bottom of this page then: http://00a.cd6.myftpupload.com/equipment-transport/

All the settings for the image are the same as the page you created.

Add New Note to this Reply

[Jackie]

Hi again.

As I see, you forgot to add the extra-class: 'full-width'.

Please check it again.

Thanks.

Add New Note to this Reply

[Author]

Posts