try:製作image gallery

by cactus77kiki

HTML

<!--try: different size thumbnail test-->
<body>


<p class="image-container">
  <img src="https://lh3.googleusercontent.com/-QmnzEDQzVKk/WY1bbQS4_jE/AAAAAAAAVWk/rUi0oKXPEu0bxLkSAn7MUcbK-BQp7qdxgCHMYCg/s240/6452914364880584241">
  
</p>
<p class="image-container">
    <img src="https://lh3.googleusercontent.com/-n2LmFYh07jI/WHSMS9i_C7E/AAAAAAAAUnk/KAXt1U2ghl8jYl5bj399_FcXTvUT4J8zwCHMYCg/s240/6373873630022929329">
  
   
</p>
<p class="image-container">
 <img src="https://lh3.googleusercontent.com/-xQPciO2lFcM/WMvs7yI_X3E/AAAAAAAAVOM/2kgucPyhucEsU2a9m7nl1Nk6r2L7_3HXACHMYCg/s240/6398468207425838961">
  
    
</p>
<p class="image-container">
<img src="https://lh3.googleusercontent.com/-0XLDEQQNPKo/VAsR3oKnnZE/AAAAAAAATI4/YqSUU6UN140yCYPgkq0vO6fbrBZV-PbpQCHMYCg/s240/6055953771302198673">

    
</p>
<p class="image-container">
<img src="https://lh3.googleusercontent.com/-L6CyTFlPZJ8/VA7XTv34D5E/AAAAAAAAVWk/rjUarpmFZbguepoCMvdPFM8P7puDcCEYACHMYCg/s240/6057015283128209297">
</p>
</body>

CSS

body{ max-width:240px;}
p.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  overflow: hidden;
}

p.image-container img {
  width: 100%;
}