0

I am trying to crop a set of images of slightly varying sizes to be squares of matching sizes and make them responsive. I found that it's possible to crop my images by putting them in div's and then making the image a background image, but when I try to use height: auto to get responsive images, the div collapses.

This is the closest thing I can find to my problem: How to make centre cropped image responsive?

but this solution can only get a square crop if the image is in a portrait orientation to begin with. Additionally, I would have to hand-crop every image according to it's size.

I guess what I am looking for is a CSS hack that could crop all my images to be the same size square and then responsively scale them. Is this wishful thinking for CSS?

Community
  • 1
  • 1
Saralyn
  • 303
  • 2
  • 4
  • 9
  • did u try max-width property? – Dhaval Chheda May 22 '16 at 03:03
  • Yes. I've set it up with max-width: 100% – Saralyn May 22 '16 at 04:02
  • I was working on a project yesterday and added this code for getting my image responsive ( I had bootstrap incorporated in the project ) so you may try my code and see if it works for you as well .. .about-image .class-name img { display: block; width: 100%; height: 28em; } – Dhaval Chheda May 22 '16 at 04:05

1 Answers1

0

Did you try the background-size:cover? it adjust the background image to the size of the container..

    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
Johnnyenc
  • 7
  • 1