Pablo Glez Pablo Glez - 4 months ago 14
CSS Question

max-height crops an image from the bottom, how to crop it from the top?

Having this html/css code:

<!DOCTYPE html>
<html>
<head> <style>
img {
max-height: 100px;
overflow: auto;
}
</style>
</head>
<body>

<img src="http://www.wwwwwww.com//photos/foto.PNG" />

</body>
</html>


We have this result

enter image description here

Modifying the css like this:

img {
max-height: 75px;
overflow: auto;
}


We have this result

enter image description here

What do I have to do to get this result?:

enter image description here

I found the clip property, but I am using a Bootstrap carousel, and I would like to implement this required method on this element, Do you know if it's possible?

Answer

I'm not sure if it's exactly what you're looking for, but by wrapping it in a <div> tag with a few css properties, you can achieve the effect.

I'm not in love with the static nature of the sizing, so if you need something more dynamic, keep looking, but this should get you started.

https://jsfiddle.net/e9jmrkkn/25/

Comments