Full screen images

Asked

Viewed 182 times

1

How to place 2 images or more side by side, occupying 100% of the page?

    @charset "utf-8";
    * {
      margin: 0;
      padding: 0;
    }
    .galeria {
      background: #FFFFFF;
      width: 100%;
      height: 768px;
      display: inline-block;
      /*overflow: hidden;*/
    }
    .galeria .botoes {
      display: none;
      position: absolute;
    }
    .galeria .botoes a.anterior {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechae.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.anterior:hover {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechaehover.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.proximo {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechad.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.proximo:hover {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechadhover.png);
      background-size: 30px 130px;
    }
    .galeria ul {
      list-style: none;
      display: table;
      position: relative;
      width: 100%;
      height: 768px;
    }
    .galeria ul li {
      display: inline-block;
      width: 100%;
      height: 768px;
      float: left;
    }
    .galeria ul li img {
      width: 100%;
      height: 100%;
    }
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="slider.css" rel="stylesheet" type="text/css">
  <title>Slider Jquery</title>
</head>

<body>
  <div id="galeria" class="galeria">
    <div id="botoes" class="botoes">
      <a href="#" class="anterior"></a>
      <a href="#" class="proximo"></a>
    </div>
    <ul>
      <li>
        <img src="imagens/imagem1.jpg" alt="Imagem 1">
      </li>
      <li>
        <img src="imagens/imagem2.jpg" alt="Imagem 2">
      </li>
      <li>
        <img src="imagens/imagem3.jpg" alt="Imagem 3">
      </li>
    </ul>
  </div>
</body>

</html>

css css3
  • 1

    Are you doing a right slider? Are you doing it based on some javascript? Because it seems to me that the problem actually also involves javascript, because it is he who creates the functionality and gives the characteristic of "slider". About the code, what would actually be the problem? It would just put 2 images at a time on the screen?

  • 1

    I am using jquery, but I need to put the images as if it were display: inline-block, more accurate that the slider takes 100% of the page and when I put 100% the images are below each other and when I put in pixels they are right on each other’s side, that and doubt, thank you

  • 2

    The problem with this is that jQuery himself will be in charge of creating this structure for you, creating a "frame" where the images go through the "background". You already applied jQuery to create the slider?

  • 1

    I was still not positioning the images to then apply the jquery. I’ll try to apply and see what happens, hopefully it works out, and thanks again for the tips :)

  • If it does not work, it will be some layout customization. Dai recommend that return, if the doubt persists.

  • Okay I’m trying here!

  • There is the possibility to create the slider without jQuery yes, but by the html and css structure that he went through, it seemed to be depending on an external js, which he confirmed, so continuity in this line of reasoning.

  • Use the vw and vh units to occupy the full size of the viewport with CSS... I edited your question, but consider adding what that 100% would be relative to horizontal or vertical and also adding Javascript code if possible.

  • Thanks guys managed to put adjusting the css, now I will do jquery to be ready!

  • 4

    @Leonardosilva, prepare an answer with the solution of the problem or if it is not possible to consider removing the question.

Show 5 more comments

2 answers

2

Use css:

/*Estilo para inserir duas imagens lado a lado ocupando 100% da largura da página*/
li img {
 width:50%;
 height:auto;
 float:left;
}

-1

Use jQuery to scroll through your UL and dynamically assign a width of the size of your view port in the times the amount of images on your slider. I won’t put the code, the logic is very simple, I hope they don’t come with sticks and stones on me.

Browser other questions tagged css css3

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