Div vertical position based on window width
I have an image that I have set to resize to 100% of the window width.
I have a div of text that I want to position over a certain part of that image (so it's readable).
Because the height of the image changes with the width, I need to the div of text to move up an开发者_如何学Cd down so that it stays over a particular portion of the image.
Is there a way to adjust the vertical positioning of the div automatically?
Thanks.
Suppose the html is:
<div class="container">
<div id="image"><img src="abc.png" /></div>
<div id="text">some text</div>
</div>
You'll add following jquery script to put the text always inside the image layer:
$(document).ready(function(){
putInsideImage();
});
function putInsideImage(){
var h = $("#image").innerHeight();
var w = $("#image").innerWidth();
$("#text").css({"margin-top":-(h/2) + "px", "margin-left": (w/2) + "px"});
}
精彩评论