Adjust background image to div size using File API
css, filereader, javascript, jquery
Solution
You can set the `background-size` css property to `contain`, just like this:
.css( "background-size", 'contain' )
See here for more information.
Note: As commented by Rory McCrossan setting the `background-size` to `cover` will also work, that's when you don't mind cropping the image.
Problem
I have an issue at the moment, I'm using a set of image blocks for an upload system, as shown below. When i click on each of the squares who are `input type="file"` i get the image preview with the File reader API, all of that is working fine, what i do is replace the background image of the div (whose dimensions are 100px X 100px) for the preview, using ``` .css( "background", 'url(' + e.target.result + ')' ) ``` But the image doesn't adjust to the div width and height, and it shows only one portion. I tried with css map setting `"background-size": "100%"` or even `"background-size": "100px 100px"`, but the results remain the same. Any ideas? Thanks in advance