How to automatically crop and center an image
One solution is to use a background image centered within an element sized to the cropped dimensions.
Basic example
.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat;}
<div class="center-cropped" style="background-image: url('http://placehold.it/200x200');"></div>
How to automatically crop and center an image in div container
add object-fit: cover;
to the image to fill the given size while not stretching the image. Also use height: 100%; width: 100%;
to make sure that the image only take the given space.
The image will be centered by default.
img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* for demonstration only */
div {
margin-bottom: 20px;
}
div:nth-of-type(1) {
width: 200px;
height: 50px;
}
div:nth-of-type(2) {
width: 200px;
height: 100px;
}
div:nth-of-type(3) {
width: 200px;
height: 200px;
}
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
How to center and crop an image to always appear in square shape with CSS?
jsFiddle Demo
div {
width: 250px;
height: 250px;
overflow: hidden;
margin: 10px;
position: relative;
}
img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
<div>
<img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>
how to get an image to crop in center
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translateY(-50%); /* add this line to move your picture 50% up*/
}
To use in all browsers:
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
But I'd suggest you to use background-image
case described here
CSS Display an Image Resized and Cropped
You could use a combination of both methods eg.
.crop { width: 200px; height: 150px; overflow: hidden; }
.crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; }
<div class="crop"> <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck"> </div>
HTML - Bootstrap - How to crop the center part of an image
@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;
}
Center Cropping Image
Change img css to this
#posts .image img{
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
How it works: https://jsfiddle.net/6ns549hy/
Related Topics
Why Percentage Value Within Grid-Gap Create Overflow in CSS Grid
How to Create a Curve on the Top of a Background
Meaning of Numbers in "Col-Md-4"," Col-Xs-1", "Col-Lg-2" in Bootstrap
How to Include One CSS File in Another
Downloading a Google Font and Setting Up an Offline Site That Uses It
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
Dynamically Change Color to Lighter or Darker by Percentage Css
How to Clear the Cache of Nginx
Placing Unicode Character in CSS Content Value
Styling Google Maps Infowindow
Match All Elements Having Class Name Starting With a Specific String
100Vw Causing Horizontal Overflow, But Only If More Than One