Simple CSS gallery [closed]

0

I'm trying to make a gallery for a website and I'd like the photos to show only within div class="conteudo" . I tried to set height and width to div but the photos appear as in the image below, stacked and being displayed outside div . They should be centered above the 'div id="thumb"'

HTML

<divclass="conteudo" style="height:680px;">
  <div id="galeria">
    <img id="foto1" src="imgs/002.jpg" alt="">
    <img id="foto2" src="imgs/003.jpg" alt="">
    <img id="foto3" src="imgs/04.jpg" alt="">
    <img id="foto4" src="imgs/05.jpg" alt="">
    <img id="foto5" src="imgs/06.jpg" alt="">
    <img id="foto6" src="imgs/07.jpg" alt="">
    <img id="foto7" src="imgs/08.jpg" alt="">
    <img id="foto8" src="imgs/09.jpg" alt="">
    <img id="foto9" src="imgs/10.png" alt="">
    <img id="foto10" src="imgs/11.png" alt="">
    <img id="foto11" src="imgs/12.png" alt="">
  </div>

  <div id="thumb" class="thumb" style=" display:grid; max-height: 80%;">
    <a href="#foto1"><img src="imgs/002.jpg" alt=""></a>
    <a href="#foto2"><img src="imgs/003.jpg" alt=""></a>
    <a href="#foto3"><img src="imgs/04.jpg" alt=""></a>
    <a href="#foto4"><img src="imgs/05.jpg" alt=""></a>
    <a href="#foto5"><img src="imgs/06.jpg" alt=""></a>
    <a href="#foto6"><img src="imgs/07.jpg" alt=""></a>
    <a href="#foto7"><img src="imgs/08.jpg" alt=""></a>
    <a href="#foto8"><img src="imgs/09.jpg" alt=""></a>
    <a href="#foto9"><img src="imgs/10.png" alt=""></a>
    <a href="#foto10"><img src="imgs/11.png" alt=""></a>
    <a href="#foto11"><img src="imgs/12.png" alt=""></a>
  </div>
</div>

CSS

.conteudo {
  background-color: rgba(255, 250, 250, 0.3);
  width: 90%;
  margin: 0 auto;
  position: relative;
  border-radius: 50px;
}

.thumb {
  width: 200px;
  height: 600px;
  text-align: center;
  display: inline;
  float: right;
  overflow-x: scroll;
  border-radius: 50px;
}

.thumb img {
  width: 150px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 100%;
}

#galeria {
  overflow: hidden;
  text-align: center;
  margin-left: 20px;
  margin-top: 40px;
  height: 675px;
  width: 900px;
}

#galeria img {
  max-height: 675px;
  min-height: 675px;
  min-width: 900px;
  max-width: 900px;
}
    
asked by anonymous 05.05.2017 / 04:41

1 answer

0

Just tell the img tag that it needs to occupy 100% of the space of the div it is in.

img{
  width: 100%;
 }
    
05.05.2017 / 14:37