0

Alright, Ive worked in html for a while but now attempting to build a fully responsive site with responsive images/changes according to device. I need this for a client and was going to do with media calls in CSS but found a tutorial on srcset claiming it is the correct way to accomplish this.

My person has specified they want a separate image to load for the following: - desktop -iphone 6s -iphone 6plus/ipad pro -other/smaller mobile

My image has a margin of 20 px on each side, meaning I need the image to be the width of the screen - 40px.

I went to https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions and followed a tutorial on src set and came up with these sizes, taking into account when to multiply by 2 or 3 for resolution (I think I have gotten a handle on how pixels/resolution works):

  • Desktop: 768px
  • iphone 6s: 670px
  • iphone 6 plus:1122px
  • other mobile: 240px

I then wrote the following having read the browser will switch to the correct image based on screen size:

<img src="/images/home-desktop.jpg" srcset="/images/home-iphone6s.jpg 670w, /images/iphone6plus.jpg 1122w, /images/allMobile.jpg, 240w, /images/home-desktop.jpg 768w">

however nothing at all is working, no matter how I stretch the browser.I get this:

enter image description here

What am I doing wrong here? the values with the w are the sizes of the images - this isn't supposed to be screen size right? how can I fix this?

blue
  • 7,175
  • 16
  • 81
  • 179

1 Answers1

-1

Remove the slash before images in src and srcset will get the image to appear.

src="/images/home-desktop.jpg"

to 

src="images/home-desktop.jpg"

or, depending on location

src="../images/home-desktop.jpg"

Here's an example I made. Scale it with the browser and the images will change.

<img src="http://i.imgur.com/TvWMgVA.jpg" srcset="http://i.imgur.com/5aVGfyV.jpg 670w, http://i.imgur.com/IfcHwWe.jpg 1122w, http://i.imgur.com/dHDGSBO.jpg 240w, http://i.imgur.com/JVDFaMT.jpg 768w">

Remove the comma after allMobile.jpg,

Matt McManis
  • 4,475
  • 5
  • 38
  • 93
  • @skyguy What is the full path to your image? Is it on a web server or local computer? – Matt McManis Sep 09 '16 at 23:10
  • the full path is what i have images/home-desktop.jpg it is local. The default (not in srcset) shows up but only at first when I remove the slashes. Why is this – blue Sep 09 '16 at 23:39
  • @skyguy I've updated the answer. Remove the comma after allMobile.jpg and also test my example. – Matt McManis Sep 10 '16 at 00:30