Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcela Vega

Ajustar imagens automaticamente no ecrã

Por , em Desenvolvimento frontend

Recommended Posts

Marcela Vega    0

Marcela Vega
Postado

Olá, galera!

 

Estou montando uma galeria simples com HTML e CSS, na qual está estruturada da seguinte maneira:

 

IMG 1 - IMG 2 - IMG 3

IMG 4 - IMG 5 - IMG 6

 

E assim por diante...

 

Quando visualizo no celular ou tablet, as imagens não reduzem automaticamente, mas sim, se deslocam. Ficando da seguinte maneira:

 

IMG 1 - IMG 2

IMG 3

IMG 4- IMG 5

IMG 6

 

PERGUNTA: Como faço para as imagens reduzirem automaticamente conforme o tamanho do ecrã? Para que assim elas continuem estruturadas de uma única maneira, tanto no computador, quando nos dispositivos de mão.

 

Abaixo os códigos:

 

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
 
<meta charset="utf-8" />
 
<title>Pagina Teste</title>
 
<link rel="stylesheet" type="text/css" href="estilo_galeria.css" />
 
<script type='text/javascript' src='[url=http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js']http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>[/url]
 
<script type="text/javascript" src="script.js"></script>
 
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" />
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
     <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
    <style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: transparent;
width: 100%;
position: relative;
top: 90px;
 
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
-webkit-transition: opacity 0.2s linear;
opacity:0.70;
text-decoration:none;
}
#gallery ul a:hover img {
-webkit-transition: opacity 0.2s linear;
opacity:1.0;
text-decoration:none;
}
#gallery ul a:hover { color: transparent; }
 
</style>
       
</head>
<body>
 
<!--start main menu-->
 
<div id="main_menu_bg" align="center">
<div id="main_menu_info" align="center">
 
<a href="#"></a>
 
     <nav id="menu">
     <ul>
             <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
     </nav> 
                
</div>
</div>
 
<!--end main menu-->
 
<!--start my work-->
 
<div id="my_work" align="center">
<h1>PÁGINA TESTE<hr width="120px" size="1px" color="#CCCCCC"></h1><h2>GALERIA TESTE</h2>
 
<!--end my work-->
 
<!--start gallery-->
 
<div id="gallery" align="center">
 
 
<!--PRIMEIRA LINHA-->
    <ul>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
    </ul>
    
<!--SEGUNDA LINHA-->
 
    <ul>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
        <li>
            <a href="[url=http://www.marcelavega.hol.es/testes/img_01.jpg]http://www.marcelavega.hol.es/testes/img_01.jpg[/url]" title="imagem">
                <img src="[url=http://www.marcelavega.hol.es/testes/thumb_01.jpg]http://www.marcelavega.hol.es/testes/thumb_01.jpg[/url]" alt="" />
            </a>
        </li>
    </ul>    
 
</div>
 
<!--end gallery--->
 
</body>
</html>

---

 

 

CSS

 

 
/* START BODY */
 
body{
background-color: #f6f6f6;
width:100%;
height:100%;
}
 
/* END BODY */
 
/* START MAIN MENU */
 
#main_menu_bg{
position: fixed;
top: 0%;
width: 100%;
left: 0%;
height: 80px;
background-color: #FFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #e3e3e3;
border-left-color: #FFF;
z-index: 9999;
}
 
#main_menu_info{
width: 90%;
}
 
#menu ul{
padding: 0px;
background-color: transparent;
list-style: none;
float: right;
}
 
#menu ul li {
display: inline-block;
}
 
#menu ul li a{
padding: 17px 15px;
display: inline-block;
/*visual do link*/
background-color: transparent;
color: #000;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity 0.4s linear;
opacity:1;
}
 
#menu ul li a:hover {
-webkit-transition: opacity 0.2s linear;
opacity:0.40;
text-decoration:none;
}
 
/* END MAIN MENU */
 
/* START MY WORK */
 
#my_work{
position:absolute;
width:100%;
height: 200px;
top: 80px;
left: 0%;
background-color: transparent;
}
 
#my_work h1{
font-size: 25px;
color: #333;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-weight: 700;
line-height: 25px;
letter-spacing: 0,5px;
position: relative;
top: 50px;
}
 
#my_work h2{
font-size: 15px;
color: #666;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-weight: lighter;
letter-spacing: 1px;
position: relative;
top: 45px;
}
 
/* END MY WORK */
 
/* START GALLERY */
 
#gallery{
display: block; 
}
 
#gallery ul{
padding: 2px 0px;
background-color: transparent; 
line-height: 0px;
}
 
#gallery ul li a{
padding: 0px;
display: inline-block; 
}
 
#gallery ul li a img{
width: 100%;
}
 
#jquery-overlay {
position: fixed;
top: 0px;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
}
 
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
 
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #FFF;
width: 50px;
height: 50px;
margin: 0 auto;
}
 
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
 
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
 
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
 
#lightbox-nav-btnPrev { 
left: 0; 
float: left;
}
 
#lightbox-nav-btnNext { 
right: 0; 
float: right;
}
 
#lightbox-container-image-data-box {
font: 12px 'Open Sans', sans-serif;
background-color: #fff;
margin: 0 auto;
font-weight: lighter;
letter-spacing: 0px;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
 
#lightbox-container-image-data {
padding: 0 10px; 
color: #999; 
}
 
#lightbox-container-image-data #lightbox-image-details { 
width: 70%; 
float: left; 
text-align: left; 
}
 
#lightbox-image-details-caption { font-weight: lighter; font-size: 14px; color:#666; }
#lightbox-image-details-currentNumber {
display: block; 
clear: left; 
padding-bottom: 1.0em; 
}
 
#lightbox-secNav-btnClose {
width: 66px; 
float: right;
padding-bottom: 0.7em; 
}
 
/* END GALLERY */

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito