1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Keep 100% width on image gallery with no blank space in the sides

Discussion in 'CSS' started by badger_, Aug 4, 2017.

  1. #1
    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.
    SEMrush
    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):
     
    badger_, Aug 4, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,477
    Likes Received:
    1,020
    Best Answers:
    19
    Trophy Points:
    400
    #2
    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
     
    qwikad.com, Aug 4, 2017 IP
  3. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #3
    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):
     
    badger_, Aug 5, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,603
    Likes Received:
    1,542
    Best Answers:
    223
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Aug 8, 2017 IP
  5. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #5
    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.
     
    badger_, Aug 9, 2017 IP