Have you tried adjusting the transform: scale() property in the CSS? or is that not something you wanted to do in the first place?

Maybe set “background-size: cover;” that should fill the entire div with the image. If not why not try and resize the image so that it fills up more space.

Try to set image as css property background and set background-size:cover;. Hope it will help you to solve this problem.

I have tried everything I can think of, like: overflow, box-sizing, messing with divs in the html, hard-coding div width, etc. Yet nothing is working and I’m not seeing any inherited characteristics that need overriding for any of these to work.

This is causing a problem where my image has a massive amount of whitespace around it and I can’t figure out how to get it to stop (since my code is already working on other pages).

I’ve tried switching from .png to .jpg and back, but its been no use.

Any help is appreciated.

(Border-radius also doesn’t work due to this, which was sort of my first hint it was a div size problem.)

My 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>

My 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; 
}