1

Tengo una división en mi pantalla y necesito que en la parte derecha la imagen que uso, se ajuste. Sin embargo, lo que realmente hace es poner la imagen y solo mostrar la mitad.

section {
  width: 100%;
  height: 100vh;
  display: flex;
}

#left {
  background-color: rgb(239, 231, 226);
  width: 50%;
  font-size: calc(0.5rem + 0.5vw);
  height: 100vh;
}

#right {
  background-image: url(https://www.cic.es/wp-content/uploads/2018/05/industria-4.0-transformacion-digital.jpg);
  background-position: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100vh;
  width: 50%;
  height: 100vh;
}
<section id="About-us">
  <div id="left">
    <h1>Hola</h1>
    <p>My enterprise is a La mayoría de las veces, los elementos absolutamente posicionados que tienen su height y width establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados
      se pueden crear para llenar el espacio vertical disponible, especificando tanto top como bottom, y dejando height sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto
      left como right, y dando a width el valor de auto.</p>
  </div>
  <div id="right"></div>
</section>

3
  • background-size: cover; background-position: center; Commented el 24 ene. 2021 a las 1:48
  • Agrega la parte de left y right pues parece que se desborda una. No estás considerando los márgenes ni los padding
    – DavElsanto
    Commented el 24 ene. 2021 a las 2:36
  • Hola @lotsoeloso, ¿de qué forma quiere que se ajuste la imagen? 1. A escala, 2. O se recorte con el objeto de que cubra toda la parte derecha. Commented el 24 ene. 2021 a las 3:20

1 respuesta 1

3

Ajuste de imagen

Sea cual fuese la forma en la que desees ajustar la imagen de la derecha deberías realizar algunos ajustes:

Reemplazar en la regla #right {}:

#right {
    ...

    background-position: cover;
}

Por esta otra:

#right {
    ...

    background-position: center;
}

Dado que el valor cover no es válida en la propiedad background-position.

Ahora bien, ten en cuenta que la sintaxis de la propiedad anterior es:

background-position: x y;

Donde x es la posición horizontal e y es la posición vertical.

Eliminar la propiedad background-attachment: fixed; de la regla antes mencionada.

Por último, podrías cambiar a la propiedad background-size los valores 100% 100vh por contain o cover según el ajuste que desee.

Caso 1:

Para el primer caso de ajuste de imagen tenemos el siguiente ejemplo:

section {
  width: 100%;
  height: 100vh;
  display: flex;
}

#left {
  background-color: rgb(239, 231, 226);
  width: 50%;
  font-size: calc(0.5rem + 0.5vw);
  height: 100vh;
}

#right {
  background-image: url(https://www.cic.es/wp-content/uploads/2018/05/industria-4.0-transformacion-digital.jpg);
  
  /* Se reemplazó «cover» por «center» */
  background-position: center;
  background-repeat: no-repeat;
  
  /* Se elimina esta propiedad: */
  /* background-attachment: fixed; */
  
  /* Se reemplazó 100% 100vh por contain
     el primer caso */
  background-size: contain;
  
  width: 50%;
  height: 100vh;
}
<section id="About-us">
  <div id="left">
    <h1>Hola</h1>
    <p>My enterprise is a La mayoría de las veces, los elementos absolutamente posicionados que tienen su height y width establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados
      se pueden crear para llenar el espacio vertical disponible, especificando tanto top como bottom, y dejando height sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto
      left como right, y dando a width el valor de auto.</p>
  </div>
  <div id="right"></div>
</section>

Caso 2:

Para el segundo caso de ajuste de imagen tenemos el siguiente ejemplo:

section {
  width: 100%;
  height: 100vh;
  display: flex;
}

#left {
  background-color: rgb(239, 231, 226);
  width: 50%;
  font-size: calc(0.5rem + 0.5vw);
  height: 100vh;
}

#right {
  background-image: url(https://www.cic.es/wp-content/uploads/2018/05/industria-4.0-transformacion-digital.jpg);
  
  /* Se reemplazó «cover» por «center» */
  background-position: center;
  background-repeat: no-repeat;
  
  /* Se elimina esta propiedad: */
  /* background-attachment: fixed; */
  
  /* Se reemplazó 100% 100vh por cover
     en el segundo caso */
  background-size: cover;
  
  width: 50%;
  height: 100vh;
}
<section id="About-us">
  <div id="left">
    <h1>Hola</h1>
    <p>My enterprise is a La mayoría de las veces, los elementos absolutamente posicionados que tienen su height y width establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados
      se pueden crear para llenar el espacio vertical disponible, especificando tanto top como bottom, y dejando height sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto
      left como right, y dando a width el valor de auto.</p>
  </div>
  <div id="right"></div>
</section>

Si desea profundizar sobre el tema puede consultar:

  1. background-position.
  2. background-size.

Pulse el enlace «Página completa» que se observa en la demo publicada acá.

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.