Estoy aprendiendo código y estoy realizando un ejercicio con CSS Grid, he colocado dos imágenes dentro de un grid, pero no se adaptan al ancho de este, y no se qué hacer. He probado con object-fit: cover;
y nada.
¿Alguien podría echarme una mano?
Quiero entender por qué está pasando esto, el Grid es la sección verde, la veréis al hacer scroll.
h1, h2, h3, h4, h5 {
font-family: 'Avenir', sans-serif;
font-weight: 400;
line-height: 1.15;
}
body {
margin: 0;
font-family: Avenir, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
img {
width: 100%;
}
.hero-title{
padding: 50px;
text-align: center;
}
.cuerpo{
text-align: center;
}
.primer-texto{
background-color: #f8dae7;
padding: 30px 0;
margin-bottom: 0;
}
.descripcion{
margin-bottom: 50px;
}
.gallery {
background-color: #67c2a3;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.gallery img{
object-fit: cover;
}
.texto-1 {
margin: 100px;
}
.texto-2 {
margin: 100px;
}
.ventajas{
padding: 30px 0;
margin-bottom: 0;
margin-top: 20;
text-align: center;
background-color: #f8dae7
}
.ventajas-imagenes {
display: grid;
grid-template-columns: repeat(4, 350px);
grid-column-gap: 30px;
object-fit: cover;
justify-content: center;
}
.inline{
display:inline-block;
padding: 55px;
}
/* 48em = 768px */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<a href="" class="logo">LoBE</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Inicio</a></li>
<li><a href="#about">Sobre Nosotros</a></li>
<li><a href="#careers">Únete</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</header>
<div class="image-container">
<img src="https://ganemosalamanca.es/wp-content/uploads/2018/06/Propuestas-comercio-pymes-Ganemos-Salamanca.jpg" />
</div>
<!--Primer Texto-->
<div class="primer-texto">
<div class="hero-title">
<h1>LoBE</h1>
<h2><strong>La App del Barrio</strong></h2>
</div>
<!-- Frase -->
<div class="cuerpo">
<div class="descripcion">
<p>Con LoBE ya no tendrás que buscar un hueco para salir a comprar, las tiendas de tu barrio llegarán directamente a tu casa, ¡o a donde tú quieras!</p>
</div>
</div>
</div>
<!--Primer Texto-->
<!--Grid-->
<div class="gallery">
<div class="imagen-1"><img src="https://ganemospalencia.com/wp-content/uploads/2020/04/5551353-1080x675.jpg" />
</div>
<div class="texto-1">
<h2><strong>Tus tiendas favoritas a un solo click</strong></h2>
<p>En LoBE amamos nuestro barrio, por eso y por que sabemos que vosotros también valoráis los pequeños comercios que tenéis cerca hemos creado el primer marketplace de comercio local, ¿te animas a descubrirlo? Podrás chatear con los vendedores, comparar precios, comprar mediante la app y recibirlo en tu domicilio o programar una recogida en tienda. ¿Qué más necesitas?</p>
</div>
<div class="texto-2">
<h2><strong>La App para los que no quieren perderse nada</strong></h2>
<p>A todos nos ha pasado, estás un sábado noche mirando instagram y, derrepente, te encuentras con un storie de tu cantante favorito que ha estado actuando al lado de tu casa. ¿Cómo hacer que esto no vuelva a pasar? Con LoBE tendrás localizados todos los eventos cercanos a ti, para que nunca vuelvas a perderte nada.</p>
</div>
<div class="imagen-2"><img src="https://cflvdg.avoz.es/sc/980x//default/2016/08/19/00121471564261616246165/Foto/.jpg"/>
</div>
</div>
<!--Ventajas-->
<div class="ventajas">
<h2><strong>¿Por qué usar LoBE?</strong></h2>
<div class="ventajas-imagenes">
<div class="imagen-1"><img src="https://s.libertaddigital.com/2017/06/29/1920/1080/fit/rider-deliveroo.jpg" />
</div>
<div class="imagen-2"><img src="https://opcions.org/wp-content/uploads/2017/07/cajas_verduras.jpg" />
</div>
<div class="imagen-3"><img src="https://d500.epimg.net/cincodias/imagenes/2020/05/12/pyme/1589262878_723998_1589263405_noticia_normal.jpg" />
</div>
<div class="imagen-4"><img src="https://www.comerciojaen.com/wp-content/uploads/2020/04/Comercio-festivos.jpg" />
</div>
</div>
<div class="ventajas-lista">
<div class="inline block block1">Rapidez</div>
<div class="inline block block2">Sostenibilidad</div>
<div class="inline block block3">Calidad</div>
<div class="inline block block4">Cercanía</div>
</div>
</div>
<!--Imagen-final-->
<div class="image-container">
<img src="https://pymeonline.es/wp-content/uploads/2019/01/velos-de-novia.jpg"/>
</div>