Responsive in one direction

[graphicedge]

I have set up a responsive site using Dreamweaver 2017 and the only glitch I seem to have is with the responsive images.

My images are a little over 800px wide.  I place them into a column at a browser width of 1240px.  Everything looks good.

When i make the width smaller everything looks good.  But when I make the screen say 1600px wide the photos do not get any larger causing the entire two column layout to stay to the right with more space being added to the right hand side of the photo column.

I thought responsive meant that it would scale larger and smaller to fit the column.  Am I wrong and if I am wrong what's the fix?

[osgood_ · Accepted solution]

graphicedge  wrote

I have set up a responsive site using Dreamweaver 2017 and the only glitch I seem to have is with the responsive images.

My images are a little over 800px wide.  I place them into a column at a browser width of 1240px.  Everything looks good.

When i make the width smaller everything looks good.  But when I make the screen say 1600px wide the photos do not get any larger causing the entire two column layout to stay to the right with more space being added to the right hand side of the photo column.

I thought responsive meant that it would scale larger and smaller to fit the column.  Am I wrong and if I am wrong what's the fix?

Your image is not wide enough then. An image won't grow any wider that its original width unless you set it to do so. If you let an image grow from 800px to 1600px and beyond you will most likely see some deterioration, so you need to make images wide enough so they dont do that.

[Nancy OShea]

You need bigger images for the largest target device.

You may find you need more than one set of image sizes to meet various device requirements (size and bandwidth). See Osgood's discussion on SRCSET.

OT: Srcset

Nancy

[Nancy OShea]

You might want to center your images with the center-block class.   With smaller images on wide screens, it adds a bit of symmetry.

<img class="img-responsive center-block" src="http://lorempixel.com/900/600/people/5" alt="...">