CODEWITHSUNDEEP
javascriptcsshtmlimage
dany
dany

Reputation: 1871

To crop/resize an image to change the aspect ratio using CSS

I have an image of size 700px(width) x 333px(height) which have aspect ratio 2.10. I want to display this image in size 327px(width)and 183px(height) with aspect ratio 16:9.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 16:9 and displayed as 327px(width)and 183px(height).Following is the code I tried. object-fit: cover; works fine, it crops and resizes the image to size 327px X 183px but it is not supported on all/older browsers versions. What could be an alternative to achieve the same result through CSS supported on all and older browsers?

/*original image  :  http://starmoz.com/images/lancia-gamma5.jpg */
.cropAndResize {
    width: 327px;
    height: 183px;
    object-fit: cover;
}
<body>
  <div>
    <img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
  </div>
</body>

Upvotes: 2

Views: 2912

Answers (3)

user7207170
user7207170

Reputation:

Maybe something like this could work for you? The only caveat is you need to set a specific margin to align the image within the container to center it.

.crop {
    width: 327px;
    height: 183px;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}

.cropAndResize {
    position: absolute;
    min-width: 100%;
    max-height: 100%;
    margin: 0px 0px 0 -20px;
}
<body>
  <div class="crop">
    <img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
  </div>
</body>

Upvotes: 0

Hans Dash
Hans Dash

Reputation: 761

One simple solution could be:

.cropAndResize {
  height: 183px;
  margin-left: -20px; 
}

div {
  width: 327px;
  overflow: hidden;
}

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

For crop purpose I often make use of background-image on a element of type block or inline-block instead of relies on img tag:

.cropAndResize {
    width: 327px;
    height: 183px;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');
}
<body>
  <div class="cropAndResize"></div>
</body>

Upvotes: 3

Related Questions