How to make multiple images responsive

Asked

Viewed 51 times

0

section {
	font:bold;
	text-align: center;
}

h1 {
	font-size: 30px;
	text-align: center;
	color: #fff;
}

img  {
width: 233px;
height: 302px;
border-radius: 5px;
cursor: pointer;
-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

img:hover {
-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

h2 {
	color: #fff;
	font-size: 20px;
	line-height: -0.6;
}

p {
	color: #fff;
	font-size: 15px;
	line-height: 2.50;

}

/*Alinhando as caixas*/

.caixa-e {

	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(-5%,-50%);
}

.caixa-d {

	position: absolute;
	top: 50%;
	left: 28%;
	transform: translate(-28%,-50%);
}

.caixa-m {

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.caixa-j {

	position: absolute;
	top: 50%;
	left: 72%;
	transform: translate(-72%,-50%);
}

.caixa-w {

	position: absolute;
	top: 50%;
	left: 95%;
	transform: translate(-95%,-50%);
}
<section class="section">

<h1>Dream Team</h1>

<div class="caixa-e">


<img src="img/erian.jpg">

<h2>Erian Erik  ★ </h2>	
<p>Lider do projeto </p>
</div>

<div class="caixa-d">


<img src="img/DANI.jpg">
<h2>Danielle Saluti</h2>	
<p>Analista e Redatora</p>
</div>

<div class="caixa-m">


<img src="img/mat.jpg">
<h2>Matheus Magalhaes</h2>	
<p>Programador Java</p>
</div>

<div class="caixa-j">


<img src="img/JEAN.jpg">
<h2>Jean Braga</h2>	
<p>administrador Banco de dados</p>
</div>

<div class="caixa-w">


<img src="img/walter.jpg">
<h2>João Vitor</h2>	
<p>	Auxiliar geral</p>
</div>
</section>

html css responsive-layout responsive

  • with widhtand height fixed in px will not be responsive, try to change to percentage

  • What was responsive to you? Just don’t let one image sink into the other by making their width decrease and keeping them all on the same line? Or do you want them to always be the same width and when it doesn’t fit more falls to the bottom line? Your question is not very clear...

  • Try to explain the expected result. You just copied and pasted your code. It’s hard to help.

  • I want that when the window diminishes the images will be under each other ...

1 answer

0


In your css do the following:

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

Always remember to use the meta tag viewport to make your site responsive:

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

And prefer to use relative measures as in % instead of px which are fixed.

Browser other questions tagged html css responsive-layout responsive

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