How to crop dynamic images coming from java side?

Question

I'm getting an image from a url from a Java service. The image size is too big.

How can I decrease it's size using inline css?

Image contains lots of white border from top and bottom. I need to remove that too.

Answer 1

Please remember, that StackOverflow is not made for doing your work. Please try it the next time yourself and google the stuff you want before consulting SO.

Here the first two links if you google css3 cut image, both do more or less the same you want:

• CSS Display an Image Resized and Cropped
• How to “crop” a rectangular image into a square with CSS?

Anyways, here is a possible solution for you with inline-css:

Place the <img>-Tag with your image in a <div>, which defines the size of the "window", trough which we look at the image (which size remains actually the same).

Here a simple exapmle:

<div style="height:100px; width:150px; overflow:hidden;">
   <img src="path/to/your/image" />
</div>

We are using overflow: hidden; here, which says that everything in this box, which is bigger than the box itself, will not being displayed. To adjust the image (because of your white borders), add i.e. style="margin-left: 10px"; to the <img>-Tag. You can also use negative values there.