Floating Images Responsively

0
566
Floating CSS images

When you are writing documents that contain images you have a number of options available in how they are rendered. Here we look at the placement of floated images.

You have an image of a certain width and size. You want text to wrap around it. You want this image to not scale too big or too small in different screen sizes.

Here are three ways you can control your embedded images responsively:

  1. Scale to a percentage width of the parent container with aspect ratio intact
  2. Scale to a percentage width of the parent container
  3. Use img srcset and size attributes

To scale to a percentage width of the parent with the aspect ratio intact, use this CSS code:

.scale100 {
  width: 100%;
  height: auto;
}
.scale66 {
  width: 66%;
  height: auto;
}
.scale50 {
  width: 50%;
  height: auto;
}
.scale33 {
  width: 33%;
  height: auto;
}
.scale25 {
  width: 25%;
  height: auto;
}

To scale to a percentage width of the parent container, use this CSS code:

.w100 {
  width: 100%;
}
.w66 {
  width: 66%;
}
.w50 {
  width: 50%;
}
.w33 {
  width: 33%;
}
.w25 {
  width: 25%;
}

To let the browser choose the image use this HTML code:

<img class="float-left" src="300x300.jpg"
     srcset="200x200.jpg 200w,
             300x300.jpg 300w"
     sizes="(max-width: 399px) 200px,
            (min-width: 400px) 300px"/>

The HTML

An example of how to use all three techniques is shown below. Tips are provided in the HTML code for you to read. Because the code spans across this web page, it will be hard to read. There is a scrollbar at the bottom of this section. Its best you copy and paste this in a text editor and then study the code. For this exercise, line 52 is the start of where the code is for the technique of floating images responsively.

Before you copy and paste this code, go create six images of these sizes:

  • 200×200.jpg
  • 300×300.jpg
  • 400×400.jpg
  • 500×500.jpg
  • 600×600.jpg
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Kobashi Computing | A HTML 5 + FlexBox Responsive Layout</title>
  6.   <link rel="stylesheet" type="text/css" href="styles.css">
  7.   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  8.   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
  9.   <link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
  10.   <link href="https://fonts.googleapis.com/css?family=Vesper+Libre" rel="stylesheet">
  11. </head>
  12.  
  13. <body>
  14.   <div id="page">
  15.     <header>
  16.       <h1>Kobashi Computing</h1>
  17.     </header>
  18.     <menu>
  19.       <menuitem><a href="/publishing" title="Publishing">Publishing</a></menuitem>
  20.       <menuitem><a href="/advertising" title="Advertising">Advertising</a></menuitem>
  21.       <menuitem><a href="/contact" title="Contact">Contact</a></menuitem>
  22.     </menu>
  23.     <main>
  24.       <article>
  25.         <h2>This is the title</h2>
  26.         <b>Summary:</b>
  27.         <summary>This is the summary of the article.</summary>
  28.         <p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <del>1600s</del><ins>1500s</ins>, when an unknown printer took a galley of type and <em>scrambled</em> it to make a type <i>specimen</i> book. </p>
  29.  
  30.         <h3>Blockquote Support</h3>
  31.  
  32.         <blockquote>A leader is one who knows the way, goes the way, and shows the way</blockquote>
  33.  
  34.         <h3>Numbered List Support</h3>
  35.         <ol>
  36.           <li>San Francisco Giants</li>
  37.           <li>New York Yankees</li>
  38.           <li>Colorado Rockies</li>
  39.           <li>Anaheim Angels</li>
  40.           <li>Los Angeles Dodgers</li>
  41.         </ol>
  42.  
  43.         <h3>Unordered List Support</h3>
  44.         <ul>
  45.           <li>CalTech</li>
  46.           <li>Stanford</li>
  47.           <li>Harvard</li>
  48.           <li>MIT</li>
  49.           <li>Yale</li>
  50.         </ul>
  51.  
  52.         <h3 class="clear">Floated Responsive Image Support</h3>
  53.         <p>When floating images, you must have enough text to make it look good. Get in the habit of placing the image tag after the first or second sentence. This is a 300x300 image with 50% width and will scale non-proportionate based on its parent container. <img class="float-right w50" src="600x600.jpg"/>  You will have to choose smaller images and if needed, use Lightbox.</p>
  54.         <p>When choosing the image, remember that it has a parent container. Try to go no bigger than 50% of the container width. An image is inline flow so put it within a paragraph. Save disk space by not creating too many images. Test in all width sizes with the browser to find a good spot. If there is not enough text, then only use a smaller srset and size. Know what the maximum page width is and what the article content column size is at maximum size. Let the browser scale it up only to the biggest picture in the srcset.
  55.         </p>
  56.         <p>Pages tend to look too taken over by the images are maxed out inside the parent container so when doing full scale responsive images. Don't generate images more than 50% of its full size in relation to the parent container. To create sections related to comments, use CSS clear:both.</p>
  57.  
  58.         <p style="clear:both">This image floated to the left is based on srcset and sizes. By using this, we download the most appropriate size image and save bandwidth. The browser makes this decision.
  59.         <img class="float-left" src="300x300.jpg"
  60.              srcset="200x200.jpg 200w,
  61.                      300x300.jpg 300w"
  62.              sizes="(max-width: 399px) 200px,
  63.                     (min-width: 400px) 300px"/>
  64.         You want to create multiple images in various sizes. Do not create your images for a particular layout of the page. Just create them based on 100 pixels size differences. Specify the range of images' size and assign a pixel width. This will index into the srscet. Set the ranges to take into account text flowing around the image. Notice that it is dependent on the parent container's width. So set image files in the srcset based on this. For example, anything above 500x500 would be too big for this layout.
  65.         </p>
  66.  
  67.         <p style="clear:both">This image is scaling to the width of its parent container proportionately and then being resized to 33% of the container.<img class="float-left scale33" src="600x600.jpg"/> It is using only one image of 600x600 pixels in size and not a srcset. A higher resolution image is used so that the quality isn't lost when shrunk.<p>
  68.         <p>As you resize the browser on a desktop, observe how it retains its size. Also observe that there is not much text here so you probably would use a smaller scale to make it wrap around it.</p>
  69.  
  70.         <h3>Code Tag Support</h3>
  71.         <p>Use any of the CSS code below to control image aspect ratio, width within parent container, and scaling.</p>
  72.         <code><pre->
  73. .scale100 {
  74.   width: 100%;
  75.   height: auto;
  76. }
  77. .scale66 {
  78.   width: 66%;
  79.   height: auto;
  80. }
  81. .scale50 {
  82.   width: 50%;
  83.   height: auto;
  84. }
  85. .scale33 {
  86.   width: 33%;
  87.   height: auto;
  88. }
  89. .scale25 {
  90.   width: 25%;
  91.   height: auto;
  92. }
  93. .w100 {
  94.   width: 100%;
  95. }
  96. .w66 {
  97.   width: 66%;
  98. }
  99. .w50 {
  100.   width: 50%;
  101. }
  102. .w33 {
  103.   width: 33%;
  104. }
  105. .w25 {
  106.   width: 25%;
  107. }
  108.         </pre-></code>
  109.         </p>
  110.  
  111.         <h3>Table Tag Support</h3>
  112.         <table>
  113.           <thead>
  114.             <tr>
  115.               <th>Symbol</th>
  116.               <th>Company</th>
  117.               <th>Price</th>
  118.             </tr>
  119.           </thead>
  120.           <tbody>
  121.             <tr>
  122.               <td>AA</td>
  123.               <td>Alcoa</td>
  124.               <td>$8.55</td>
  125.             </tr>
  126.             <tr>
  127.               <td>MMM</td>
  128.               <td>3M</td>
  129.               <td>$78.89</td>
  130.             </tr>
  131.             <tr>
  132.               <td>GS</td>
  133.               <td>Goldman Sachs</td>
  134.               <td>$188.12</td>
  135.             </tr>
  136.           </tbody>
  137.         </table>
  138.  
  139.       </article>
  140.     </main>
  141.     <aside>
  142.       <h3>Categories</h3>
  143.       <ul class="nostyle">
  144.         <li><a href="/c" title="C Programming">C</a></li>
  145.         <li><a href="/http" title="HTTP">Http</a></li>
  146.         <li><a href="/software" title="Software">Software</a></li>
  147.         <li><a href="/web-development" title="Web development">Web Development</a></li>
  148.         <li><a href="/wordpress" title="Wordpress">Wordpress</a></li>
  149.       </ul>
  150.       <h3>To Do List</h3>
  151.       <ul>
  152.         <li>Grocery shopping</li>
  153.         <li>Eye appointment</li>
  154.         <li>Get car serviced</li>
  155.         <li>Order pizza</li>
  156.         <li>Water plants</li>
  157.       </ul>
  158.       <h3>Canvas Circle!</h3>
  159.       <canvas id="myCanvas" width="120" height="120"></canvas>
  160.       <script type="application/javascript">
  161.         var myCanvas = document.getElementById("myCanvas");
  162.         var ctx = myCanvas.getContext("2d");
  163.         var x = myCanvas.width/2;
  164.         var y = myCanvas.height/2;
  165.         ctx.beginPath();
  166.         ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
  167.         ctx.fillStyle = "#FF0000";
  168.         ctx.closePath();
  169.         ctx.fill();
  170.       </script>
  171.     </aside>
  172.     <footer>
  173.       <p><a href="/terms-of-use" title="Terms of use">Terms of use</a> | <a href="/privacy-policy" title="Privacy policy">Privacy policy</a> | <a href="/about" title="About">About</a><br>
  174.       <i>Copyright &copy; 2106 Kobashi Computing. All rights reserved.</i></p>
  175.     </footer>
  176.   </div>
  177. </body>
  178. </html>

The CSS

  1. @media all and (max-width: 319px) {
  2.   #page {
  3.     display: flex;
  4.     flex-direction: column;
  5.     width: 240px;
  6.     font-size: 11px;
  7.   }
  8. }
  9. @media all and (min-width: 320px) and (max-width: 639px) {
  10.   #page {
  11.     display: flex;
  12.     flex-direction: column;
  13.     width: 320px;
  14.     font-size: 12px;
  15.   }
  16. }
  17. @media all and (min-width: 640px) and (max-width: 1023px) {
  18.   #page {
  19.     display: flex;
  20.     flex-direction: column;
  21.     flex-wrap: wrap;
  22.     width: 640px;
  23.     font-size: 16px;
  24.   }
  25. }
  26. @media all and (min-width: 1024px) and (max-width: 1279px) {
  27.   #page {
  28.     display: flex;
  29.     flex-direction: row;
  30.     flex-wrap: wrap;
  31.     width: 1024px;
  32.     font-size: 18px;
  33.   }
  34.   #page main {
  35.     width: 75%;
  36.   }
  37.   #page aside {
  38.     width: 25%;
  39.   }
  40. }
  41. @media all and (min-width: 1280px) {
  42.   #page {
  43.     display: flex;
  44.     flex-direction: row;
  45.     flex-wrap: wrap;
  46.     width: 1280px;
  47.     font-size: 20px;
  48.   }
  49.  #page main {
  50.     width: 75%;
  51.   }
  52.   #page aside {
  53.     width: 25%;
  54.   }
  55. }
  56.  
  57. * {
  58.   box-sizing: border-box;
  59. }
  60. html {
  61.   background-color: #ccc;
  62.   font-family: 'Vesper Libre', serif;
  63.   line-height: 1.5em;
  64. }
  65. h1, h2, h3, h4, h5, h6 {
  66.   clear:both;
  67. }
  68. h1 {
  69.   font-size: 2.4em;
  70. }
  71. h2 {
  72.   font-family: 'Arima Madurai', cursive;
  73.   font-size: 2em;
  74. }
  75. h3 {
  76.   font-family: 'Arima Madurai', cursive;
  77.   font-size: 1.4em;
  78. }
  79. h4 {
  80.   font-size: 1.2em;
  81. }
  82. h5 {
  83.   font-size: 1em;
  84. }
  85. h6 {
  86.   font-size: 0.8em;
  87. }
  88. blockquote {
  89.   margin: 1em;
  90.   padding: 1em;
  91.   background-color: #cecece;
  92.   border: 1px dashed #ccc;
  93.   font-style: italic;
  94. }
  95. blockquote::before {
  96.   content: "\201C";
  97.   font-size: 2em;
  98. }
  99. blockquote::after {
  100.   content: "\201D";
  101.   font-size: 2em;
  102. }
  103. code pre {
  104.   clear: both;
  105.   background-color: #fcfcfc;
  106.   border: 1px dashed #ccc;
  107.   margin: 1em;
  108.   padding: 1em;
  109.   font-family: 'Source Code Pro', monospace;  
  110.   font-size: 0.65em;
  111.   line-height: 1.1em;
  112. }
  113. em {
  114.   font-weight: bold;
  115. }
  116. summary {
  117.   border: 1px solid #ccc;
  118.   padding: 1em;
  119.   background-color: #fcfcfc;
  120.   color: black;
  121. }
  122. table, th, td {
  123.   border: 1px solid #ccc;
  124. }
  125. th, td {
  126.   font-size: 0.8em;
  127.   padding: 0.5em;
  128. }
  129. th {
  130.   color: white;
  131.   background-color: gray;
  132. }
  133. ul.nostyle, ol.nostyle {
  134.   margin: 0;
  135.   padding: 0 0 0 1em;
  136.   list-style-type: none;
  137. }
  138. #page {
  139.   margin: 1em auto;
  140. }
  141. #page header, #page menu, #page footer {
  142.   width: 100%;
  143. }
  144. #page header {
  145.   padding: 1em;
  146.   background-color: gray;
  147.   color: white;
  148.   border-top-left-radius: 0.5em;
  149.   border-top-right-radius: 0.5em;
  150.   text-align: center;
  151. }
  152. #page menu {
  153.   margin: 0;
  154.   padding: 1em;
  155.   text-align: center;
  156.   background-color: black;
  157.   color: white;
  158. }
  159. #page menu a {
  160.   color: white;
  161.   text-decoration: none;
  162. }
  163. #page menu a:hover {
  164.   color: white;
  165.   text-decoration: underline;
  166. }
  167. #page menu menuitem {
  168.   margin-right: 2em;
  169. }
  170. #page main {
  171.   padding: 1em;
  172.   background-color: white;
  173. }
  174. #page aside {
  175.   padding: 1em;
  176.   background-color: yellow;
  177. }
  178. #page footer {
  179.   padding: 1em;
  180.   background-color: black;
  181.   text-align: center;
  182.   border-bottom-left-radius: 0.5em;
  183.   border-bottom-right-radius: 0.5em;
  184.   font-size: 0.8em;
  185.   color: white;
  186. }
  187. #page footer a {
  188.   color: white;
  189.   text-decoration: none;
  190. }
  191. #page footer a:hover {
  192.   color: white;
  193.   text-decoration: underline;
  194. }
  195. #categories ul {
  196.   padding: 0;
  197.   margin: 0;
  198.   list-style-type: none;
  199. }
  200. .float-left {
  201.   float: left;
  202.   margin: 1em 1em 1em 0;
  203. }
  204. .float-right {
  205.   float: right;
  206.   margin: 1em 0 1em 1em;
  207. }
  208. /* width of container w/proportion */
  209. .scale100 {
  210.   width: 100%;
  211.   height: auto;
  212. }
  213. .scale66 {
  214.   width: 66%;
  215.   height: auto;
  216. }
  217. .scale50 {
  218.   width: 50%;
  219.   height: auto;
  220. }
  221. .scale33 {
  222.   width: 33%;
  223.   height: auto;
  224. }
  225. .scale25 {
  226.   width: 25%;
  227.   height: auto;
  228. }
  229. /* width of container */
  230. .w100 {
  231.   width: 100%;
  232. }
  233. .w66 {
  234.   width: 66%;
  235. }
  236. .w50 {
  237.   width: 50%;
  238. }
  239. .w33 {
  240.   width: 33%;
  241. }
  242. .w25 {
  243.   width: 25%;
  244. }