I am in need of a scalable image that can be centered within a scalable <div>. Currently, I have a wrapper <div> along with the scalable <div> that contains the image. Additionally, there is some jQuery code in place to calculate the width of the <body> and determine the available space for the <div>/<img />. The website content spans 745px, leaving the rest of the window for the div and image placement.
Here's what I currently have:
<div class="ad_banner_holder" id="ad_banner_holder" style="width: 100%;">
<div class="ad_banner" id="ad_banner" style="background: white; text-align: center; position: absolute;">
<a href="http://www.finconsult.ro/" target="_blank"><img id="the_ad" style="position: fixed; max-width: 800px; margin-top: 82px;" src="http://ww1.particularul.ro/images/ads/3rdtry2.jpg" /></a>
</div>
</div>
<script type="text/javascript">
$(window).load(function () {
var adwidth = $("body").width();
adwidth = adwidth - 760;
$("#the_ad").css("width", adwidth);
$("#ad_banner").css("width", adwidth);
});
$(window).resize(function () {
var adwidth = $("body").width();
adwidth = adwidth - 760;
$("#ad_banner").css("width", adwidth);
});
$(window).resize(function () {
var adwidth = $("#ad_banner").width();
$("#the_ad").css("width", adwidth);
});
</script>
The issue arises when refreshing the page as the browser centers the image initially but then resizes it from the current point towards the right, causing it to deviate from the center. It's perplexing why this behavior occurs only under specific triggers.
Furthermore, attempting to change the trigger for image resizing to .hover() produces the same result: the centered image widens and shifts away from its central position.
Any assistance or explanation on this matter would be greatly appreciated.