es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El tamaño del fondo es la mitad del div.

25 May, 2023 Programación

Necesito un fondo que tenga el 50% de ancho del div (desde el borde izquierdo hasta el centro). Y la imagen de fondo no debería cambiar de proporciones cuando se modifique la pantalla. Ahora tengo el siguiente código CSS:

.bg {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
background: url(../img.png);
background-position: left;
background-size: 50vw 100%;
-webkit-background-size: 50vw 100%; /* soporte del navegador /
-moz-background-size: 50vw 100%; / soporte del navegador /
-o-background-size: 50vw 100%; / soporte del navegador */
background-repeat: no-repeat;
}

Las dimensiones de la imagen son: 1043 * 735

Pero la imagen cambia de proporciones (se comprime o se estira) en diferentes pantallas ¿Existe una forma de hacer que la imagen cubra el fondo pero aún así siga siendo la mitad del div?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    CSS:

    .bg {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  background: url(../img.png);            
  background-position: left;
  background-size: 50vw auto;
  -webkit-background-size: 50vw auto; /* soporte del navegador */
  -moz-background-size: 50vw auto; /* soporte del navegador */
  -o-background-size: 50vw auto; /* soporte del navegador */
  background-repeat: no-repeat;
}

    Puede utilizar background-size: 50vw auto; para asegurarse de que la imagen no cambie de proporciones cuando se cambia la pantalla.

Comments are closed.