Question 183510 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Flatsome theme catalog image size

Does anybody knows how set proportional (1:1) dimensions for catalogue images that fit in all scenarios in Flatsome theme? set width and height on image or box-image with cover fit is not solution. In image settings 1:1 or checking uncropped is also not solution.

We don’t have all images 1:1 but I don’t want to write 10 media queries to cover all scenarios.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solution was:

    set default images to uncroped, also check in catalogue settings "equal image heights".


  2. 0 
    .catalogue-image-container {
  position: relative;
  width: 100%; 
}

.catalogue-image-container::before {
  content: "";
  display: block;
  padding-bottom: 100%; 
}

.catalogue-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    you can use this css. you need to change the class name for catalogue-image-container and catalogue-image as per your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search