0

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>

1
  • Agrega a la pregunta tu código para armar un ejemplo mínimo verificable por favor
    – user128299
    Commented el 18 mar. 2021 a las 18:55

1 respuesta 1

0

Disculpa no entendí bien tu pregunta, yo lo interprete como que queres que la imagen abarque todo el ancho del div ósea que sea vea como un fondo puede ser? si es así acá realice un par de modificaciones para que quede como lo estarías deseando, espero que sea de ayuda y si no es lo que necesitas, hacemelo saber así me adapto mas a lo que estas pidiendo, suerte!

.galeria {
    background: url('https://ganemospalencia.com/wp-content/uploads/2020/04/5551353-1080x675.jpg') no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.galeria-texto {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    color: #fff;
}
  <div class="galeria">
    <div class="galeria-texto">
        <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>

1
  • Hola Daniel! Muchísimas gracias por tu ayuda y por tu respuesta!! Lo que quiero es que las dos imagenes que hay en la grid ocupen lo mismo dentro de la cuadricula, por que ahora las dos imagenes se ven con tamaños diferentes. He cambiado la imagen y ya no se nota tanto, pero aun así se nota... siento si no he planteado bien mi pregunta, me está costando mucho aprender a usar estos lenguajes :(
    – Irene
    Commented el 18 mar. 2021 a las 21:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.