Menu
I can't seem to find an answer to this, although some are close.
I have an image that I want to take out the middle of (crop it), a bit like this:
So it's perfectly in the middle and with the same aspect ratio.
All I have managed to do, is crop an image like so:
..where it's connected to the edges.
So basically, I want to have a div of fixed size, with an image inside. This image needs to be zoomed in and centred, with the overflow hidden.
How can I do this?
925
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
Using width, height and overflow to crop images in CSSAdd a div can give it class container. Set width and height to 150px then set the overflow to hidden. Use margin to position the image based on your needs. In this case, set it to -100px 0 0 -150px.
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.
HTML:
<div>
<img src="https://picsum.photos/600/500" />
</div>
CSS:
div{
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
img{
position: absolute;
top: -9999px;
left: -9999px;
right: -9999px;
bottom: -9999px;
margin: auto;
}
CODEPEN link: http://codepen.io/bra1N/pen/NArjNN
167
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
