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.

Cómo hacer que la imagen de fondo se redimensione automáticamente, pero solo hasta que se alcance su tamaño original.

Estoy intentando crear un sitio web, donde la imagen de fondo esté centrada y se ajuste al tamaño de la ventana del navegador, pero solo hasta alcanzar su tamaño original. Después de eso, dejará de crecer y se mantendrá centrada. ¿Existe alguna manera de hacer esto utilizando CSS? He hecho algunos ejemplos para explicarme mejor. Aquí, el ancho del sitio es mayor que el ancho de la imagen actual, por lo que la imagen alcanza su ancho máximo y se mantiene allí. Sin embargo, la altura de la imagen mostrada es igual o mayor a la altura de la ventana, por lo que se muestra de arriba a abajo. Además, si el ancho del sitio es mayor que el ancho de la imagen pero la altura no lo es, no quiero ver solo una parte de esa imagen, me encantaría que se redimensione automáticamente para que se ajuste a la pantalla, algo así como hacer zoom. Y aquí se muestra que si el ancho y la altura del sitio son mayores que el ancho y la altura de la imagen actual, simplemente se mantiene centrada. Tengo algún código, pero no puedo hacer que funcione porque soy bastante nuevo en CSS. Código:

body{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Sí, hay una forma de lograr esto utilizando CSS.

    Puedes usar la propiedad background-size para asegurarte de que la imagen de fondo se ajuste a la ventana del navegador. La propiedad background-size debe establecerse en 100% para que la imagen se redimensione a la ventana.

    Para asegurarte de que la imagen no sea más grande que su tamaño original, puedes establecer la propiedad max-width con el ancho de la imagen original.

    Aquí tienes un ejemplo del código:

    body {
        background-image: url(imagen-de-fondo.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        max-width: 1920px; /*Ancho de la imagen original*/
    }
    

    Este código centrará la imagen de fondo, la redimensionará para que se ajuste a la ventana del navegador manteniendo su relación de aspecto y asegurará que no sea más grande que su tamaño original.

    ¡Espero que esto te ayude!

Comments are closed.