Responsive layout in an image

Question

Responsive layout in an image

Navigation

#1 by (1 votes)

0

Good morning dear programmers, today I disturb them again with my beginner doubts. I wanted to know why I can not make this responsive image with decreased size (In case I put 80%), when I do this is leaving this space, and 100% is normal.

@charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 85%;
	background-color: white;
	margin: 110px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}
#interface2 {
	width: 85%;
	margin: 110px auto 10px auto;
	}
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 38% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 1.8vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 0.8vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}
.im:hover {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
@charset "UTF-8";
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
  margin: 10px 10px 10px 10px;
  padding: 0px;
}
.post {
  position: relative;
  margin: 0px;
  padding: 0px;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  width: 80%;
  height: 80%
}
.imgp {
  width: 100%;
  height: 100%
  }

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 1vw;
  
}
.post:hover .legenda {
  transition: 0.2s;
  background-color: rgba(244,116,0,1);
}

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="_imagens/icon.png" type="image/x-icon" />
		<link rel="shortcut icon" href="_imagens/icon.png" type="image/x-icon" />
		<title>Processos e Manuais de Instruções</title>
		<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
		<link rel="stylesheet" type="text/css" href="_css/fotos.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).scroll(function(){vary=$(this).scrollTop();if(y<25){$('.logo').css({'margin':'25px38%0px0px'});$('.im').css({'padding':'10px10px22px10px'});$('.icon').css({'display':'inline-block'});$('.efc').css({'display':'initial'});$('.cabecalho').css({'transition':'4s'});}else{$('.logo').css({'margin':'3px38%0px0px'});$('.im').css({'padding':'10px10px10px10px'});$('.icon').css({'display':'none'});$('.efc').css({'display':'none'});$('.cabecalho').css({'transition':'4s'});}});</script></head><bodyclass="postagem">
			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><brclass="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><brclass="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><brclass="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><brclass="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg"><figcaptionclass="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg"><figcaptionclass="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png"><figcaptionclass="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png"><figcaptionclass="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png"><figcaptionclass="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>
	</body>
	</html>

So that's the problem, I can decrease the size of the image and caption, but it's left over from that link space, I wanted to decrease too but I can not. And also another question about responsive layout is in the menu icons, I can not put

img { 
max-width: 100%
height: auto;
}

For him to fit the page ...

html css layout-responsivo

asked by anonymous 18.10.2018 / 12:38

1 answer

Pass the page html via GET Ajax Container closes immediately on docker-compose

score 1 · Answer 1

Dude, your problem is that you're using the property in the wrong places. For example you are using padding in the link when you should actually use margin in the class. post

Another thing, if you want it to be 100% wide you can not set it at 80%. try increasing the margin to "decrease" .post , since one will push the other side and they will be "shrunk."

Followthecodewiththecorrectiontobeasintheimageabove,IleftthecommentsintheCSSwhereImoved,itwasverylittleuntil;)

    @charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 85%;
	background-color: white;
	margin: 110px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}
#interface2 {
	width: 85%;
	margin: 110px auto 10px auto;
	}
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 38% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 1.8vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 0.8vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}
.im:hover {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
@charset "UTF-8";
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
	/* não usar esse padding */
  /* margin: 10px 10px 10px 10px; */
  padding: 0px;
}
.post {
  position: relative;
  /* coloque margem e não o padding  */
  margin: 10px;
  padding: 0px;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  /* se vc quer que fique 100% tem que remover esses 80% */
  /* width: 80%; */
  /* height: 80% */
}
.imgp {
  width: 100%;
  height: 100%
  }

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 1vw;
  
}
.post:hover .legenda {
  transition: 0.2s;
  background-color: rgba(244,116,0,1);
}

			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><brclass="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><brclass="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><brclass="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><brclass="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg"><figcaptionclass="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg"><figcaptionclass="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png"><figcaptionclass="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png"><figcaptionclass="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png"><figcaptionclass="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>