jquery - How set a image as a background, without background-image property? -

i have image inside block. image take 100% of width of screen. parent block take 500px in height, , 100% of screen width. i've set overflow: hidden parent block can view first 500px of image in height.

now, problem is, when resize window of browser, need scale image background. cannot use background-image because of performance issues (reflows, etc...).

i made fiddle. how can make second image same reaction of first image? please note, image, in case has random resolutions.

thank help! it's ok if solution needs in js/jquery.

you need set min-width , min-height on img. need in proportion wrapper. fiddle example, image size of 1024/768, this fiddle shows:

min-width: 333.33px; /* ratio of height of img height of wrapper applied img width */ min-height: 250px; /* height setting of wrapper */