HTML - Bootstrap - How to crop the center part of an image

Question

I'm creating a website and I want to crop an image to a square image based on the orientation of the image. I'm not really familiar with CSS so I'm not sure how to tackle this problem.

If it's a landscape image (800x500) then I want the cropped image to be like this (500x500):

If it's portrait (400x600) then it should crop out this part (400x400) of the image:

How should I go about to achieve this? Preferably a method I can use along with Bootstrap's "img-responsive" so I can resize the cropped when needed.

Thanks,

Answer 1

@FljpFl0p fix it [jsfiddle][1]

[1]: https://www.bootply.com/92024 and there is another answer here How to automatically crop and center an image. Tks!

If you want it responsive and using bootstrap 4. Try this one:

CSS

.thumb-post img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}