Image is displayed in large size and cropped even if size declared is same as source

Question

I have a png image with size 30x30. Then i created an image inside a button using my 30x30 image:

<Button>
  <Image x:Name="Sample" Source="sample.png" Stretch="None" SnapsToDevicePixels="True" 
         Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>

But still the image is displayed big and cropped in the Image control. Why does this happen even they have the same size?

Maybe the two images have different [DPI resolutions](https://en.wikipedia.org/wiki/Dots_per_inch)? — Uwe Keim, Nov 09 '18 at 06:24
Take a look at [this answer](https://stackoverflow.com/a/7987448/7483664). — heap1, Nov 09 '18 at 06:27

Clemens · Accepted Answer · 2018-11-09T07:28:21.927

The image in sample.png might have different DPI than 96, which WPF uses as the size of its device independent units.

Just don't set Stretch="None" on the Image element in order to get it scaled correctly. The default value of Stretch is Uniform.

<Image Source="sample.png" Width="30" Height="30"/>

You can check the difference between the native size and the (unstretched) rendered size of an image if you load it into a BitmapImage and compare its Width and Height with its PixelWidth and PixelHeight.

Image is displayed in large size and cropped even if size declared is same as source

1 Answers1