How to Automatically Crop and Center an Image

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



Leave a reply



Submit