Make Images Scale for Responsive Web Design

Make Images Scale for Responsive Web Design
Make Images Scale for Responsive Web Design
So you have got your web layout flexing and changing layout in a fluid or responsive web layout – but the images are not quite working they are being stubborn and not scaling and moving around like the text!
The reason is because the images most probably have a fixed width which the web layout is honoring, so for example in your source code your image may have a tag like so:
[<img src="images/my-image.jpg" alt="why is my image not scaling" width="590" height="420" />]
So here the image above on a Mobile device in either portrait or landscape orientation will not scale responsively in the view-port at the correct width; for Apples iPhone its view-port is 320px portrait or 480px landscape, so images will display at their fixed size and the user on the mobile device, in the image example above they will have to scroll/swipe to see the full 590px of width  – but the idea of responsive layout is to scale all the content into the viewable view port without having to scroll width wise, it’s OK to scroll (swipe) in a depth orientation so the height doesn't really matter.

So how to fix?

Instead of assigning an absolute width value via a HTML attribute in the tag of an image, assign the CSS rule max-width that targets the image as a percentage relative width value like so:
[img {max-width:100%]
What this will do is make the image display 100% of its size within its parent element available width space.
So to illustrate this, below are 2 images of the old favourite parked domain girl, one with a defined width in pixels (590px) the other in a relative width as a percentage (100%).

Fixed Width 590px

scale images responsively

Relative Width 100%

scale-image-responsively

Start to make the browser window narrower and watch the bottom image scale and top one remain the same size. The bottom one is scaling to 100% of its parent element which will change depending on the width of the viewport in a responsive design. For a better observation check this page on an iPhone.
scale-image-responsively

So all other elements without a fixed width but rather a relative width will fit to the viewport .
scale-image-responsively-iphone
So best practice would be to optimise the image at the largest size required, then set a CSS selector which targets the images and includes the  {max-width:100%} rule and also ensure the width attribute is not in the html.
There are some new solutions being considered which serve different size images according to the user agent requesting them however these are not currently supported, this will be a step forward when it is ready as it will cut down on delivering full size images to be scaled on mobile devices.
You may well have a site that is littered with images with fixed widths, here are a couple of solutions to fix those.
Also here is a handy utility to see if your site is acting responsive for tablets and mobile devices.

COMMENTS

Name

Ads Earning Guide,4,AdSense Alternatives,1,Affiliate Marketing,1,Anti-Hacking Solution,2,Bitcoin,1,Blogger SEO,1,Blogger Tutorials,26,Blogger Widget,1,Blogging Tips,11,Business and Marketing,9,BuySellAds,1,Content Marketing,3,Contextual Marketing,2,Copyrighting,1,CPC Keywords,1,Digital Marketing,7,Download,1,Drupal Theme,1,Drupal Tutorials,8,Earning Guide,4,eCommerce Solution,1,Email Marketing,3,Facebook Marketing,1,Games Source Code,2,Google AdSense,4,HTML Script,1,Infographics,2,Information Technology,8,Instagram Marketing,1,Joomla Tutorials,1,jQuery Script,1,JS Script,1,Keyword Research,3,Learn Code,3,Learn CSS,1,Learn HTML,1,Learn XML,2,Make Money Online,5,Media Dot Net,1,MySQL Tips,1,Off Page SEO,1,On Page SEO,2,Online Tools,4,PC Tutorials,7,PHP Development,1,PHP Script,3,PPD File Sharing,1,Reviews,1,SEO Tips,4,Social Marketing,3,Template and Theme,2,Video Marketing,3,Web Design,8,Web Hosting Reviews,1,Website Script,4,WordPress Plugin,2,WordPress Script,1,WordPress Security,2,WordPress Theme,1,WordPress Tools,1,WordPress Tutorial,2,WordPress Tutorials,5,YouTube,1,
ltr
item
Teach Sansar - Leading Digital Technology: Make Images Scale for Responsive Web Design
Make Images Scale for Responsive Web Design
So you have got your web layout flexing and changing layout in a fluid or responsive web layout – but the images are not quite working they are being stubborn and not scaling and moving around like the text!
https://1.bp.blogspot.com/-TBYrlGn3EoM/WnC9vQilulI/AAAAAAAABWA/Wo9h0eML1ickaC_EShyBbMA1FYqfL3RSgCLcBGAs/s640/Make%2BImages%2BScale%2Bfor%2BResponsive%2BWeb%2BDesign.png
https://1.bp.blogspot.com/-TBYrlGn3EoM/WnC9vQilulI/AAAAAAAABWA/Wo9h0eML1ickaC_EShyBbMA1FYqfL3RSgCLcBGAs/s72-c/Make%2BImages%2BScale%2Bfor%2BResponsive%2BWeb%2BDesign.png
Teach Sansar - Leading Digital Technology
https://www.teachsansar.com/2018/01/make-images-scale-for-responsive-web-design.html
https://www.teachsansar.com/
http://www.teachsansar.com/
http://www.teachsansar.com/2018/01/make-images-scale-for-responsive-web-design.html
true
5329405941980539054
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy