Robust way to display an image with one fixed dimension

Posted by DomingoSL on Stack Overflow See other posts from Stack Overflow or by DomingoSL
Published on 2012-11-10T10:35:37Z Indexed on 2012/11/10 11:00 UTC
Read the original article Hit count: 161

Filed under:
|
|

Lets say that we have an image uploaded by the user, the upload script limits the mb but not the image size (so could be any proportion, 600X200,200X350, and so...).

Im already showing this image in one part on my site using the twitter bootstrap image handler written on css, thats good for a profile picture, the problem is that now I want that image to be a cover (like facebook/twitter cover image), my site is responsive so the width of the cover is 900px or 100% if the screen resolution is less than 900px wide. The height is always fixed to 200px. So I know there is a way to control the correct image display using CSS (maybe with jquery too) but Im not a front-end dev, Im a php dev and I dont want to use server side scripts for doing this. So im looking for suggestions or pieces of codes (css, javascript) to start with, I belive that it have to be an already made solution for this, but I dont find any on google. Thanks for any advice!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery