Menu
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,
570
By default, images are display:inline . If you only want the center the image (and not the other column content), make the image display:block using the d-block class, and then mx-auto will work.
Option Two: img with a Twist As you can see, the bottom of the image now gets cropped as it widens. But what if you want it to crop from the top? Surprisingly, you can — using CSS3's transform:rotate() we add a “flip” class to both img. scale and div.
There are many ways of cropping and centering an image in CSS. For that, you can use the background-image and object-fit properties, or the HTML <img> tag. First, we’re going to show and explain an example where we use the background-image property. Use a <div> with the class name "center-cropped". Specify the width and height properties.
If you want an image to be center-aligned for bootstrap UI, you can make use of the class center-block If you have a look at the center-block class in bootstrap.css then you may find, .center-block { display: block; margin-right: auto; margin-left: auto; }
Use a <div> with the class name "center-cropped". Specify the width and height properties. Add the background-image property and set the background-position to "center center". Add the background-repeat property with the "no-repeat" value. Let’s see the final code.
If you want it responsive and using bootstrap 4. Try this one: .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; } Add class img-responsive to img tag, which will scale your image and keep width / height ratio.
@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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With