Ir para conteúdo

POWERED BY:

Arquivado

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

luccasrodrigo

Imagens responsivas lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

luccasrodrigo    0

luccasrodrigo
Postado

Como fazer duas ou mais imagens responsivas lado a lado, de forma tal que elas se redimensionem juntas, e não caia para baixo ou só redimensione quando a tela do navegador a atinja, tenho o seguinte code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.imagem #imagemUm img{
max-width:323px;
max-height:223px;
width:100%;
height:auto;
float:left;

}

.imagem #imagemDois img{
max-width:323px;
max-height:223px;
width:100%;
height:auto;
}
</style>
</head>

<body>
<div class="imagem">
<div id="imagemUm">
<img src="Business-HD-Images-43523.jpg">
</div>

<div id="imagemDois">
<img src="1431414606.jpg"/>
</div>
</div>
</body>
</html>

 

para entenderem melhor o que quero dizer, olhem esse site e faça o teste de redimensionar a tela do navegador, o padrão desktop exibe quatro imagem com um texto, ao ir dimuindo a tela as quatro redimensionam juntas.

 

link do site: https://pittsburghkids.org/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jeovane Carvalho    6

Jeovane Carvalho
Postado

Você têm que usar as CSS Media Queries , e neste site tem um tuto explicando como aplicá-las:

 

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

 

outros links:

 

http://tableless.com.br/introducao-sobre-media-queries/

 

e não esqueça de coloca isso

<meta name=viewport content="width=device-width, initial-scale=1">

no começo do seu html dentro das tags <head></head> para os dispositivos móveis identificar o css media queries:

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