CODEWITHSUNDEEP
htmlcss
Pretty_Girl
Pretty_Girl

Reputation: 157

Responsive/adaptive photo thumbnails on a page

Scenario: I want to make a html page that has many image thumbnails (about 20). I want to make it adaptive/responsive. It should have 4 thumbnails in a row (see Picture1) when it's on wider browser (such as PC browser - mozilla etc) (see Picture2) Then, when the browser reduces it's size, it should decrease it's size.

And if the browser is too small, 1 thumbnail per row should appear (such as mobile browsers etc). (see Picture3)

It should have space in between photos (padding?)

I think this should be done using CSS?

I only have following code, which reduces thumbnail's size when browser's size is reducing.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

enter image description here

P.S: EDIT, SEE THIS PHOTO FOR FURTHER CLARIFICATIONS.Thanks

NEW IMAGE FOR CLARIFICATIONS

Upvotes: 0

Views: 113

Answers (1)

dippas
dippas

Reputation: 60573

you can achieve this using media queries

take a look at this snippet:

#container {
  width: 100%;
  max-width: 980px;  /* updated - choose whatever width you prefer */
  margin: auto  /* updated */
}
#container > div {
  width: 25%;
  float: left;
}
#container img {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 5%
}
/*whatever width query you like for phones*/

@media screen and (max-width: 640px) {
  #container > div {
    width: 100%;
    float: none
  }
<div id="container">
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
  <div>
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
    <img src="//lorempixel.com/1600/900" />
  </div>
</div>

Upvotes: 1

Related Questions