Picture resizing based on device

• 

  mojofabulous · Member · Mar 2, 2017 at 11:09 pm

  • Copy link
  • Add topic to favorites

  Hello, currently the photos in my various pages are getting distortion issues. Specifically my featured images and my page photos on phone devices.

  I am looking for the code necessary for these images to resize based on the device a user is accessing the page from.

  The current html I’m using for my photos is:

  <h2>#1 Glacial Oceanbreacher</h2>
  <img style="width:480px;height:320px;" src="https://mojofabulous.files.wordpress.com/2017/02/wateroverall1.jpg" alt="Glacial Ashray Mantle" />

  But I’m told in order to do what I need I will need css help.

  Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  mojofabulous · Member · Mar 2, 2017 at 11:17 pm

  • Copy link

  example pages

  https://mojofabulous.com/gear/water/water-armor/

  https://mojofabulous.com/warbringer/

• 

  thesacredpath · Member · Mar 3, 2017 at 7:29 am

  • Copy link

  Here would be my suggestion. Set a “max-width” and then set the height to “auto” and it will resize as needed for smaller screens. Example:
  <img style="width:480px;height:auto;" src="https://mojofabulous.files.wordpress.com/2017/02/waterarmor1.jpg?w=648" alt="Glacial Ashray Mantle">