Simple gallery in CSS

Asked

Viewed 498 times

0

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

inserir a descrição da imagem aqui

HTML

<div class="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;
}
html css

  • Can you describe the problem better? How should the images be? How are they? Enter [Edit] and improve your question, only with the image you can not identify the problem.

  • take a look https://lennonsantos.github.io/ideias/simple-slider/

  • @Lennons.Bueno Thank you very much, I added this slide and it was much better than my previous idea

  • @Pablonicolas I’m glad I could help

1 answer

0


just tell the img tag that it needs to occupy 100% of the space of the div in which it lies.

img{
  width: 100%;
 }

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.