Hello. I'd like to know if it's viable in accesible web design to make a gallery that always keeps 100% width so the images adapt their size in a way that there is no blank space in the sides in all screen sizes. Is it possible to do it in CSS, or there is the need for Javascript? I discard the option to use heavy javascript frameworks like jQueery since accesibility is way more important than this detail. CSS: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img,pre { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } .gallery { text-align:center; padding:0; margin:0; } .gallery li { list-style:none; display:inline; margin-left:0.75em; } .gallery a { display:inline-block; padding-bottom:0em; text-decoration:none; } .gallery img { display:block; max-width:100%; margin:0 auto 1em; vertical-align:bottom; /* prevent oddball bottom padding */ } Code (markup): HTML: <!DOCTYPE html><html lang="es"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <link rel="stylesheet" href="screen.css" media="screen,projection,tv"> <title> Gallery Test </title> </head><body> <h1> Gallery test </h1> <ul class="gallery"> <li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="http://placehold.it/400x300" > </a> </li> </ul> </body> </html> Code (markup):
Use @media queries. https://jsfiddle.net/pefx1897/2/ (drag the middle bar to see how the images resize depending on the screen size). <img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" width="960" height="640" /> <img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image02.jpg" width="960" height="640" /> <img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image03.jpg" width="960" height="640" /> <img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image04.jpg" width="960" height="640" /> Code (markup): img { width: 100%; height: auto; } .breakpoint { /* One column for smartphones */ max-width: 100%; display: inline-block; } @media (min-width: 420px) { /* Two columns for tablets */ .breakpoint { max-width: 48%; } } @media (min-width: 760px) { /* Four columns for large devices */ .breakpoint { max-width: 24%; } } Code (markup): Source: https://www.webpagefx.com/blog/imag...com/0476-01-responsive-images-demo/index.html
Thank you! I've made some modifications to simplify the code and use em instead of pixels, although I've lost the list markup. <img src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" width="960" height="640" alt="..." > <img src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image02.jpg" width="960" height="640" alt="..." > <img src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image03.jpg" width="960" height="640" alt="..." > <img src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image04.jpg" width="960" height="640" alt="..." > Code (markup): img { max-width:100%; height:auto; display:inline-block; } @media (min-width: 25em) { img { max-width:48%; } } @media (min-width: 35em) { img { max-width:24%; } } Code (markup):
If you want to go responsive with that so the number per line changes based on width, have a good look at nth-child. You combine it with :after and you can insert a block level to force the wrap if the perfect widths don't line up (the 33.33% for example of three across is a pain in the ass). Sometimes it also helps if they are incorrectly dropping (thanks to FF being a re-re about fractions) to use nth-child to target the last one, and give it margin-right:-1em; making it a hair narrower forcing it back up onto the correct line. Just some corner cases you might come across using %widths and the fixes -- should you have those problems.
Thank you for the pointer. Do you mean something like this for the first part? CSS: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img,pre { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } .wrapper { background:#00F; max-width:60em; margin:0 auto; } .gallery li { list-style:none; display:inline; } .gallery a { display:inline-block; } li:nth-child(3n):after { display:block; content:""; } @media(max-width:39em) { .wrapper { background:#F00; } li:nth-child(3n):after { display:none; } li:nth-child(2n):after { display:block; content:""; } } Code (markup): HTML: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <link rel="stylesheet" href="screen.css" media="screen,projection,tv"> <title> Gallery Test </title> </head><body> <h1> Gallery test </h1> <div class="wrapper"> <ul class="gallery"> <li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li><li> <a href="#"> <img alt="Image description" width="200" height="150" src="image.png" > </a> </li> </ul> <!-- .wrapper --></div> </body> </html> Code (markup): I'm now stuck trying to make the images auto-resize when they are inside the <li></li>. image.png is a 400x300 pixels placeholder image.