nr: #3 dodano: 2017-01-05 18:01
The math is pretty simple. To match to a 150 horizontal requirement:
- newImageY = 150 / incomingImageX * incomingImageY
- newimageX = 150
To match to a 100 vertical requirement:
- newImageX = 100 / incomingImageY * incomingImageX
- newimageY = 100
Then, if the scaled axis is too large for any remaining maximum constraints, you scale the entire image (both X and Y) down by the required amount.
For cropping (as opposed to scaling), you face several issues that you have to decide how to handle. Ideally, you (or the submitter) would decide what part of the image you want to show, and then crop intelligently. So we're talking about both active code and an associated UI.
For instance, there can be cases where images won't fill horizontally, but will vertically; cases where it won't fill vertically if scaled to 150 horizontally, etc.
The bottom line is pretty much "you have to examine and process the image" if you want to do this well. CSS just isn't up to doing a good job here.