image cropping with CSS

Question

How do you crop the image with CSS/coding? Or how can I find tutorials on it?

So I don't want the image to be resized, but to be "cut off"

That's too board. Can you be more specific about what you want to do? — Passerby, Mar 07 '14 at 08:54
You could place the image in a div with hidden overflow.. You can't literally crop an image with CSS. — Galadre, Mar 07 '14 at 08:54
Please provide what you've tried, and let us know what your expected result is. — George, Mar 07 '14 at 08:56

score 1 · Accepted Answer · answered Mar 07 '14 at 08:56

the image itself will not zoom if you do not apply width or height attribute/style on it.

resize the container, apply height and width style on it, together with overflow:hidden.

example:

<div class="image-container">
    <img src="http://example.com/some-image.png" alt="example"/>
</div>

and css:

.image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

further, if you want to adjust position of the image, apply position: relative and top bottom left right on it:

.image-container img {
    position: relative;
    left: 20px;
    top: -50px;
}

1 Answers1