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 object-fit: cover; que establecí como la imagen principal no funciona.

29 Jul, 2023 Programación

Requisitos previos

¡El object-fit: cover; que establecí como visual principal no funciona!

Aquí tienes una captura de pantalla del sitio en producción.

descripción de la imagen

Valor esperado

Me gustaría que la visual principal se vea como la que se encuentra en el siguiente enlace: https://code-step.com/demo/html/profile/

Procedimiento de reproducción

Por favor, ejecuta el siguiente código:

lang-html
<div id="main">
<div class="main__mainvisual">
<img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
</div>
<div>


<h1>main {</h1>

<pre><code>.main_mainvisual {
    margin-bottom: 80px;
    img {
        width: 100%;
        max-width: 1920px;
        height: 600px;
        object-fit: cover;
    }
}
</code></pre>

}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema con la propiedad object-fit: cover; que no funciona en la imagen principal puede ser causado por algunas razones.

    En primer lugar, es importante asegurarse de que la imagen que se está utilizando tenga la misma relación de aspecto que el contenedor. En este caso, el contenedor tiene una altura fija de 600px, por lo que la imagen también debe tener una altura de 600px, y el ancho debe estar en la misma proporción que el contenedor.

    Otra razón por la que object-fit: cover; puede no funcionar es si hay algún otro estilo que esté en conflicto con él. Se recomienda inspeccionar el elemento en el navegador y comprobar si hay otros estilos aplicados a la imagen o a sus elementos padre.

    Una posible solución para obtener el resultado esperado sería agregar los siguientes estilos:

    #main {
    .main__mainvisual {
        margin-bottom: 80px;
        position: relative;
        height: 600px;

        img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

    Esta solución posiciona la imagen de forma absoluta dentro del contenedor y establece su ancho y altura al 100% para cubrir todo el contenedor. Esto asegurará que object-fit: cover; funcione como se espera.

    Además, se agrega la propiedad position: relative; al elemento padre para crear un nuevo contexto para la posición absoluta de la imagen.

    Después de aplicar estos estilos, el visual principal debería verse como el que se muestra en el enlace proporcionado.

Comments are closed.