I am currently working on a project where I need images to fill a div while still maintaining their aspect ratio. To achieve this, I am utilizing jQuery to determine if the images are portrait or landscape, and adjusting the width or height accordingly.
However, I am facing an issue where all the images are being assigned the landscape class. I have spent a lot of time trying to figure out why this is happening...
Any help or insight on this matter would be greatly appreciated!
Snippet of HTML:
<div class="prop">
<div class="propimage"><img src="{@image}" alt="{@prop_name}"></div>
<div class="propname">{@prop_name}</div>
<div class="propdescription">{@description}</div>
<div class="propprice">{@price}</div>
</div>
Snippet of CSS:
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
.propimage img {
display: block;
}
img {
max-width: none;
}
.propimage {
width: 100%;
height: 300px;
overflow: hidden;
float: left;
}
Snippet of SCRIPT:
<script>
$(".propimage").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ((imgW/imgH) < refRatio){
$(".propimage").addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
</script>