Object-fit: Contain

  • Resolved mattyboyzhere

    (@mattyboyzhere)


    1 year, 8 months ago

    Hi, I am having issues getting the preview images to fit within the container, currently most of the images are getting cut off on the edges. Is there a way to make the object fit contain? The below code did not work.

    https://ibb.co/m55h13V

    .dgwt-wcas-details-main-image img {
    object-fit: contain !important;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Kris

    (@c0nst)

    Hi @mattyboyzhere

    Try this CSS:

    body .dgwt-wcas-details-main-image {
	margin-left: -20px;
	margin-right: -20px;
}

body .dgwt-wcas-details-main-image img {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: auto;
}

    It will stretch the image to the full width of the details panel.

    Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

    Regards,
    Kris

    Thread Starter mattyboyzhere

    (@mattyboyzhere)

    Hi Kris,

    I think I have found the reason for this. I believe it is to do with the plugin using the WooCommerence ‘Preview’ image and on our previews half the image has also been cut off. I think I need to change the settings so that the entire image is visible.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Object-fit: Contain’ is closed to new replies.