All geek questions in one place

Percentage of HTML / CSS image sizes set in percent do not display properly in Safari

I am working on a mobile website, and I am a little puzzled by this problem that I now have with the image attribute.

I have the sizes set as a percentage. It displays fine IE7 +, Firefox and Chrome, but not Safari. This greatly distorts the image!

Do I need to use JavaScript to display the image correctly?

Thanks in advance...

+4
source share
1 answer

Code in question:

<img src="images/uftMap.jpg" border="0" width="95%" height="95%" alt="Universal Fitness &amp; Training on Google maps" name="Universal Fitness &amp; Training on Google maps">

Remove the height attribute and the browser will scale it proportionally.

Percentage in height and width attributes is not strictly coaxial. From HTML5 specification

height = non-negative integer: The height of the image in CSS pixels.

width = non-negative integer: The width of the image in CSS pixels.

If you customize the style of this inline string rather than the stylesheet, you would be better off with a style attribute:

 <img src="images/uftMap.jpg" border="0" style="max-width: 95%" alt="Universal Fitness &amp; Training on Google maps" name="Universal Fitness &amp; Training on Google maps">
+7
source

Source: https://habr.com/ru/post/1400124/

More articles:


All Articles