How to set absolute position on elements in my case? - html

Question

I have a container div that cover the screen with set ratio.
I want to place some elements with absolute position and to be responsive (scale down or up).
I have something like
http://jsfiddle.net/hsD2G/2/
When I shrink width or height of the browser. The element location will change and looks off. Can anyone help me about it?

Answer 1

Again, this is probably not the optimal solution. At least CSS can be used partly, to center the highlights image, or using %width. If you could, somehow, make the background image containing DIV to be squared, you could do it only with CSS.
Here is the Fiddle with the jquery solution.
$( document ).ready(function() {
function update(){
var top=20,left=40;
var height = $(window).height();
var width = $(window).width();
var highlights = $('#cover-img img');
if (height > width){
// Image limited by width
var blank_top = Math.round((height - width)/2);
highlights.css('top',blank_top+top);
highlights.css('left',left);
// make it responsive 1/3 ratio
highlights.width(Math.round(width/3));
}else{
// Image limited by height
var blank_left = Math.round((width - height)/2);
highlights.css('left',blank_left+left);
highlights.css('top',top);
highlights.width(Math.round(height/3));
}
}
$( window ).resize(update);
update();
)};
Hope this helps