Query: Wide images getting cropped

[priyanka107]

Hi, while displaying images, we are resizing based on media width, and using ResizeMode.Crop. But this actually crops wide/narrow images in normal displays. For eg.images having dimensions eg. 1920 x 430px or 1053 x 440px get cropped when resizing to 880 x550 px.
How can we resize the image according to media width without the image not actually getting cropped and displays completely on the website?

[JimBobSquarePants]

Could you please provide some more information. I don’t understand the question.

[priyanka107]

Sure, I will add some screenshots. This is my orginial image -

On the view we resize it to reduce the size -

<img src="@Html.ProcessImage(Model.ContentLink).Resize(880, 550, ResizeMode.Crop)" alt="@imageAltText" class="SR-ImageLightBox__placeholder-image" style="@overlayStyle" tabindex="0" />

But then it gets cropped, and renders like this. This is how it is being fetched from the server -

This same code works for normal rectagular or square images, but for wider images like this, they get cut. How can these be best handled without getting cut?
I hope this information helps.

[JimBobSquarePants]

Thank you for the additional information; It looks to me like you should be using ResizeMode.Max. This constrains the resized image to fit the bounds of the given dimensions maintaining the original aspect ratio.

As a side note, i strongly recommend switching to the ImageTagHelper syntax where possible.

[priyanka107]

Does ResizeMode.Max impact the size/performance of the image in any way?

[JimBobSquarePants]

Size difference depends on the aspect ratio of the input image (some savings some additions) performance will be the same.

[priyanka107]

Thankyou for the information!