A project, which I needed to keep an image’s aspect ratio when resizing the browser window. When the browser window is resized, flexible images displayed in the document window becomes skewed losing its desired aspect ratio.
Incorporating JavaScript, JQuery, CSS 3, the code successfully keeps the image’s aspect ratio when the browser is resized. This helps when designing flexible layouts. Images look good when sized.
One limitation is that I use CSS background-size property, which is CSS3. Therefore, the code below only works with CSS3 supported browser: doesn’t work with IE7/8.
However, I can get this to work without using CSS3, but since I believe, needing to keep the aspect ratio, I would be implementing the script on newer CSS3 compatible browsers/devices.
Supported browsers: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
Sample HTML page:
<body>
<section>
<form id="form1" runat="server">
<h1 class="headerTitle">Folkways Note Books</h1>
<div style="float: left; width: 40%; height: 400px;">
<div class="BGImage img1"> </div>
<div class="BGImage img2"> </div>
</div>
<div style="float: left; width: 58%; height: 400px;">
<div class="BGImage img3"> </div>
<div class="BGImage img16"> </div>
</div>
</form>
<span id="start"></span>- <span id="end"></span>
</section>
</body>
CSS
<style>
div.BGImage
{
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 1;
}
div.BGImage.img1
{
background: url(media/images/Spiral-BG120603001.jpg);
}
div.BGImage.img2
{
background: url(media/images/Spiral-BG120609002.jpg);
}
div.BGImage.img3
{
background-image: url(media/images/DragonFly003-120608.jpg);
}
div.BGImage.img16
{
background-image: url(media/images/DragonFly016-120605.jpg);
;
}
div.BGImage.img7
{
background-image: url(media/images/DragonFly007-120608.jpg);
}
div.BGImage.img16
{
background-image: url(media/images/DragonFly016-120608.jpg);
}
</style>
JavaScript / JQuery
<script>
var ResizeWindowImgResize = function (Images) {
this.DynamicImages = Images;
}
ResizeWindowImgResize.prototype.SetBoxDimensions = function () {
var DynamicImages = $(".BGImage");
var imgBox;
for (var i = 0; i < DynamicImages.length; i++) {
imgBox = $(DynamicImages[i]);
var obj = this.GetBoxDimensions(imgBox);
imgBox.height(obj.width * this.ratio);
imgBox.css("background-size", "100% 100%");
}
}
ResizeWindowImgResize.prototype.ratio = .625;
ResizeWindowImgResize.prototype.GetBoxDimensions = function (item) {
return { width: item.width(), height: item.height() };
}
window.onload = function () {
var imgResize = new ResizeWindowImgResize();
imgResize.SetBoxDimensions();
}
window.onresize = function () {
var imgResize = new ResizeWindowImgResize();
imgResize.SetBoxDimensions();
};
</script>
“I invented nothing new. I simply assembled the discoveries of other men behind whom were centuries of work. Had I worked fifty or ten or even five years before, I would have failed. So it is with every new thing. Progress happens when all the factors that make for it are ready and then it is inevitable. To teach that a comparatively few men are responsible for the greatest forward steps of mankind is the worst sort of nonsense.”
Henry Ford
No comments:
Post a Comment