En mi código, he usado CSS Flexbox para poner varias imágenes en una sola línea. He especificado el tamaño de la imagen en rem y no en% porque cuando uso%, luego de cambiar el tamaño de la ventana, la cantidad de imágenes en una fila sigue siendo la misma y no quiero eso. En cambio, quiero que cuando el tamaño de la pantalla sea menor que el tamaño de la imagen, la imagen ajuste su tamaño de acuerdo con el tamaño de la pantalla y solo quede una imagen en cada fila.
El problema al que me enfrento es que cuando cambio el tamaño de la ventana para que sea menor que el tamaño de las imágenes, la imagen completa no es visible. Quiero que la imagen se reduzca en consecuencia.
html{
font-size:12px;
}
#heading{
font-size:1.5rem;
text-align:justify;
width:80%;
margin:auto;
word-spacing:0.5rem;
color:lightslategrey;
margin-top:2rem;
margin-bottom:3rem;
}
#gallery_header{
width:80%;
margin-left:auto;
margin-right:auto;
color:blue;
font-size:3rem;
text-align:center;
margin-bottom:2rem;
}
#gallery{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
width:80%;
margin:auto;
}
.img_container{
width:35rem;
height:30rem;
display:inline-block;
}
.img_container img{
width:35rem;
height:30rem;
display:inline-block;
}
main{
display:flex;
width:100%;
flex-direction:column;
align-items:center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
</head>
<body>
<div id="heading">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="gallery_header">
IMAGE GALLERY
</div>
<div id="gallery">
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
</div>
<script src="script.js"></script>
</body>
</html>Agrega el siguiente código a tu CSS
@media (max-width: 767px){
.img_container{
height: 30rem;
display: inline-block;
width: 100%;
}
.img_container img{
width: 100%;
height: 30rem;
display: inline-block;
}
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras