Jump to content
Stef's Coding Community
activeworker

Resize Images

Recommended Posts

You need to use a little css for that.

 

First, your image tag should be clean and free of any inline css styles.

 

<img class="flexsize" alt="my image" src="/path-to/image.jpg">

 

The css is simple:

 

.flexsize { width: 100%;}

 

You can use height but not height and width together. Also, the class name is whatever you choose it to be.

 

If you are planning on using a 1500px image then it's going to cause the mobile devices time to download it as well as more data usage.

 

There are more complex ways to size images within any computer or devices. Some can be done where if viewing a site via a computer it will load this image and if a mobile device it will load a different image specifically for that device.

Share this post


Link to post
Share on other sites

try this one :

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

 

How is that supposed to address a mobile device or anything that's not a tiny, square picture?

Share this post


Link to post
Share on other sites

You can do as above. But a better way is to have an image for the desktop and one in another size for mobile. Then use media queries to put in the image you want for each. This way your mobile site is not unnecessarily loading a large img making the site load slow.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...