0

estoy teniendo un problema que no puedo solucionar, vendria a ser que mis imagenes se modifican de forma drastica cuando achico la pantalla, las imagenes las tenia como fondo de un div, utilizando la propiedad

background-image:url();

Pero el contenedor al achicarse, pasaba lo siguiente:

(Como deberia ser) introducir la descripción de la imagen aquí

(Para celular)

introducir la descripción de la imagen aquí

Esto lo habia podido solucionar en cierta parte poniendo la imagen directamente en el html utilizando:

<img src="./images/desktop/image-stand-out.jpg" alt="">

Explicado con snippet:

*{
padding:0;
margin:0;
}


.forma-directa{
  width:50%;
  height:auto;
  object-fit: cover;
}


.image{
background-image:url("imgur.com/K4MoWvl");
width:50%;
height:auto;

}
<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Explicacion</title>

</head>
<body>

<div class="forma-con-img">
  <img src="imgur.com/K4MoWvl" alt="" srcset=""> 
</div>

<div class="forma-con-div">
<div class="image"></div>
</div>
</body>

Muchas gracias

1 respuesta 1

1

La mejor forma es crear un div general el cual contenga dentro los divs hijos, que serán los que contengan tu imagen, dentro de los divs hijos agregar con css el atributo background-image, con eso podrás agregar una imagen de fondo sin que esta afecte a otros elementos dentro del div, eso incluye texto u otras imagenes.

La etiqueta img funciona bien pero es un elemento, mientras que un div con el background-image es un contenedor por lo que no afecta a otros elementos dentro del mismo div.

Cabe recalcar que tendrás que agregar un height y width a tu contenedor para que se muestre, aunque también se agrega basado en la cantidad de elementos, yo suelo usar el padding si conozco previamente el tamaño de los elementos dentro del div hijo, también puedes usar tamaños en porcentajes, pixeles o basados en el viewport.

Aquí un pequeño ejemplo de como lo haría yo.

/* Div General */
.row {
  width: 100%;
  display: flex;
}

/* Div contenedor*/
 .col-1 {
  width: 50%;
  display: inline-block;
  height: auto;
  text-align: center;
  color: #fff;
  padding: 75px 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background del div */
.img1 {
  background-image:url(https://i.imgur.com/jnr11dF.png);
}
.img2 {
  background-image:url(https://i.imgur.com/5XtVcVl.png);
}
<div class="row">
  <div class="col-1 img1">
    <h2>Titulo Aquí</h2>
    <p>Insertar contenido del div aquí.</p>
  </div>

  <div class="col-1 img2">
    <h2>Titulo Aquí</h2>
    <p>Insertar contenido del div aquí.</p>
  </div>
</div>

Dentro de las propiedades del background puedes usar background-size que sirve para determinar el tamaño de las imagenes del background.

background-size: cover; si quieres que automáticamente se adapte al tamaño, background-size: 100%; si quieres que siempre se muestre el 100% del tamaño de la imagen y puedes seguir jugando con otros tamaños basados en pixeles, porcentajes, viewport o incluso en cálculos usando la función calc de css.

Usa el background-position para agregar una posición de la imagen, al centro "center", arriba "top", abajo "bottom", abajo a la izquierda "bottom right" o bien basado en cálculos, esta suele ser la mejor forma, pero depende de ti el como te sientas mas cómodo.

1
  • 1
    Muchas gracias jefferzon, lo intentare realizar, saludos Commented el 21 jun. 2021 a las 16:15

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.