View Single Post
Old 08-06-2020, 12:50 PM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,359
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Some devices might hang up on not having a surrounding tag around the <img>....a bare <img> might not work properly. Also, I wouldn't apply 'auto' to both (or either) height/width. If you define both height/width you may lose the proper aspect ratio and the image could look stretched or scrunched.

Try this, and see if it helps:

Code:
.image     {width:95%; margin:2em auto}
.image img {width:100%; max-width:586px}

<p>...</p>
<div class="image"><img alt="" src="../Images/1connection.png"/></div>
The width:100% will make the image fill the width of the container (the <div>) which is set to center on the screen and fill 95% of the width of the screen. The image height will be auto set to display the correct aspect ratio. I also add the max-width set to the width of your image. While it's not technically a direct 1:1 between max-width pixels and image-width pixels, this helps in preventing small resolution images from getting overblown and fuzzy.
Turtle91 is offline   Reply With Quote