开发者

Div vertical position based on window width

开发者 https://www.devze.com 2023-02-27 03:20 出处:网络
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).

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"});
}
0

精彩评论

暂无评论...
验证码 换一张
取 消