Full-screen images

Question

Full-screen images

Navigation

#1 by (2 votes)
#2 by (-1 votes)

1

How to put 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

asked by anonymous 11.11.2015 / 22:45

2 answers

Linq to SQL - Dynamic ordering by column index Is it possible to use Tiles inside SpringMVC tags?

score 2 · Answer 1

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;
}

12.11.2015 / 18:36

score -1 · Answer 2

Use jQuery to traverse your UL and dynamically assign a Width the size of your view port at times the number of images in your slider. I'm not going to put the code, the logic is very simple, I hope they do not come with sticks and stones on top of me.