Menu
[imgur deleted image]
The icon on the left is the result of this code:
<Button Height="23" HorizontalAlignment="Left" Margin="12,276,0,0" Name="button1" VerticalAlignment="Top" Width="75">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/add.png" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="Add" />
</StackPanel>
</Button>
The one on the right is the original image placed beside it using Photoshop. It appears the one added via code is stretched by a pixel causing some distortion. How do I prevent that?
373
Choose Edit > Content-Aware Scale. Use the bottom transformation handle to click-and-drag it to the top. Then, click on the checkmark found on the Options panel to commit to the changes. Then, press Ctrl D (Windows) or Command D (macOS) to deselect, and now, you have a piece that perfectly fits within the space.
They are stretched because you specified both width and height attributes for the <img> tag. If the actual image is of different dimensions, one can see how the browser has no options but to distort the image to make it fit the specified height and width.
1.1.When you added max-width: 100%; to any image, the width will be adjusted automatically based on the outer element width and you know what height: auto; does as it's self-explanatory. This is the fix we have been using for years to prevent image stretching in our sites.
You could add media queries for mobile devices to set the width to e.g. 50% (depending on the size of the device - you decide) and also set the height to auto. You could also use the new picture tag to accommodate various screen sizes. Using different pictures for different screen sizes seems to be the best solution.
Stretch="None" should do exactly that. If there is a difference in how the Image is displayed that may be due to pixels ending up "on edge".
You could try setting SnapsToDevicePixels="True" to avoid this.
71
Try using RenderOptions.BitmapScalingMode="NearestNeighbor".
You may want to read these:
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
