0

Is there a way, in css, to automatically crop an image so that it fits and aspect ratio without forcing it into a certain sized div. I have a page with a few thumbnails that are dynamical generated and contain an image at the top and some text, They are then displayed in rows across the screen. Very slight diffrences in image size can cause the lay to mess up. As i'm accepting user images i would like to accept a range of sizes of about the right aspect ratio rather that just one. The divs the images are in use auto width and height to maximize space usage and readability with different numbers and on different screen sizes. I have looked at object-fit but as the div resizes this dose not seem to work. The images have slight, almost undetectable, sizes differences which messes up the layout.

Edit: I would like the height and the width to be a proportion of each other without specifying the size. E.g An image height divided by width should be 1.4 and it should crop the image to make this true.

milo.farrell
  • 662
  • 6
  • 19
  • The following would work if you only need to crop the image height: https://jsfiddle.net/v05a1ngt/1/ – George Dec 06 '16 at 12:30
  • 1
    I was working on an idea but someone marked as a dupe while I was writing an answer http://codepen.io/rachelreveley/pen/WozVrK . It's a bit weird but an interesting solution. – R Reveley Dec 06 '16 at 13:12

1 Answers1

0

It is difficult to know exactly what you want without an example of code or a screenshot but assuming it is the height rather than the width that is causing the issue (based on past experience) would this work?

img {height: 80px; width: auto; max-width: 120px;}
/* adjusting the size for the width you want. */

If the images are wrapped in a container, you could try 

max-width: 100%;
R Reveley
  • 1,547
  • 3
  • 14
  • 33