HTML - como Crear resposiv img en un grid

 
Vista:
sin imagen de perfil

como Crear resposiv img en un grid

Publicado por Cael (5 intervenciones) el 11/10/2021 15:31:44
Saludos aprendis nuevo en html y css, en esta ocacion deseo pedir la ayuda de alguien me pueda dar la pauta de como poder hacer responsiva una img que se aloja en un agrilla grid, he estado creando conbinaciones y no logo crear responsiv la imagen se valla cerrando de tamañaño centrando en su contenedor. Al igual quitar el espacio de hasta arriba.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid e IMG</title>
 
 
     <link rel="stylesheet" href="grid.css"/>
 
 
 
 
 
</head>
<body>
 
 
    <div class="menu1">
       <div class="menu1">
      Hola
 
    </div>
         <div class="caja-menu1">
 
       <div class="menu-logo">
 <img src="images/logo.png">
    </div>
 
    <div class="menu-contenedor1">
 
    <h1>Heading level 2</h1>
    </div>
    </div>
 
 
 
    </div>
 
 
 
 
 
 
</body>
</html>








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
*{
  border-box:box-sizing;
  margin:0;
  padding:0;
  color: #fff;
}
 
.caja-menu1{
   display: grid;
 
grid-template-columns: 25% 77%;
height: 90px;
 }
 
.menu-logo{
 
background-color: crimson;
 
}
.menu-Logo img{
 
}
 
.menu-contenedor1{
 
    background-color: blueviolet;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder