I have a div with an image inside of it, and the overflow of the div is set to hidden so that the image will be cropped if it exceeds the width or height. It was working correctly, but sometimes it doesn't. What could be causing this issue? Here is the code I have tried:
Jquery
$("#covorpic").on("load", function(){
var covwidth = $("#covorpic").width();
if (covwidth > 750){
$("#covorpic").css({"margin-left":(750 - $("#covorpic").width())/2});
}
else{
$("#covorpic").css({"width": "750px" });
$("#covorpic").css({"margin-top":(200 - $("#covorpic").height())/2});
}
});
html
<div class="covor_cont">
<img id="covorpic" src="someimage.ext">
</div>
css
.covor_cont{
max-height: 200px;
min-height:130px;
overflow: hidden;
text-align: center;
}
#covorpic{
height: 200px;
}