He intentado todo lo que se me ocurre, como: desbordamiento , tamaño de caja , jugando con divs en el html, hard- coding div width , etc. Sin embargo, nada funciona y no veo características heredadas que necesiten anularse para que ninguno de estos funcione.

Esto está causando un problema en el que mi imagen tiene una gran cantidad de espacios en blanco a su alrededor y no puedo encontrar la manera de detenerlo (ya que mi código ya está funcionando en otras páginas).

He intentado cambiar de .png a .jpg y viceversa, pero ha sido inútil.

Cualquier ayuda es apreciada.

( Border-radius tampoco funciona debido a esto, que fue una especie de mi primer indicio de que era un problema de tamaño div.)

Mi HTML:

<div class="content-wrapper">
    <div class="content-header-wrapper">
        <h2>Page Title.</h2>
    </div>

    <div class="title-img"><img src="../Images/headshot.jpg"></div>

    <div class="content-message-wrapper">
        <div class="p1-titlewrap">
            <h3>1st Paragraph Header</h3>
        </div>
    </div>
</div>

Mi CSS:

 .content-wrapper {
    justify-items:center;
    background-color: white;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: "Ubuntu Condensed", sans-serif;
    height:auto;
}

.content-wrapper .content-header-wrapper {
    font-size: 1.5em;
    display: flex;
    justify-content: center;
}

.content-wrapper .title-img {
    display: flex;
    justify-content: center;
    transform: scale(.15,.15);
    box-sizing: content-box; 
}
0
Carter Pochynok 25 jun. 2020 a las 08:54

3 respuestas

La mejor respuesta

¿Has intentado ajustar la propiedad transform: scale () en el CSS? ¿o no es algo que querías hacer en primer lugar?

0
Edward Dai 25 jun. 2020 a las 06:16

Tal vez establezca "background-size: cover;" eso debería llenar todo el div con la imagen. Si no, ¿por qué no intentar cambiar el tamaño de la imagen para que ocupe más espacio?

0
Jason Sturch 25 jun. 2020 a las 07:56

Intente establecer la imagen como propiedad css background y establezca background-size:cover;. Espero que te ayude a resolver este problema.

0
THess 25 jun. 2020 a las 10:26