ashishkumar148 ashishkumar148 - 1 year ago 90
AngularJS Question

Image aspect ratio maintainence not working properly

I am working on the web app, in which i have to use images of different size. I have to show image in appropriate aspect ratio.

My ImageWrapper is of dimention 500x500.
I am using a directive to maintain aspect ratio.

This is hml file

<div class="image-aspect-wrapper-list ">
<img src="/OctoberImageHolder/container/2/small/1.jpeg" alt="..." onError="" image-resize >

this is css file

.image-aspect-wrapper-list {
width: 250px;
height: 250px;
text-align: center;
line-height: 250px; margin: 0 auto;
.image-aspect-wrapper-list img {
vertical-align: middle;

this is the directive

MyApp.directive('imageResize', function($window, $rootScope) {
return {
restrict: 'EA',
scope: {},
link: function(scope, elem, attrs) {
elem.on('load', function(){
if($(this).width() >= $(this).height()){



This is working fine but it takes some time to load the directive and upto that time image getting of maximum size.
how to tackle this issue.

Some time it's not working properly.

Answer Source

You can use

img {
  max-width: 100%;
  max-height: 100%;