Solution 1 :

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

Solution 2 :

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.

Solution 3 :

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

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.)


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

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

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


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

.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; 


Comment posted by Amaresh S M

do want to make the img to occupy the full div(.title-img)?

Comment posted by Richard Yan

First thing I notice is that you are missing two closing (

Comment posted by hirarqi

what is the reason you use

Comment posted by Carter Pochynok

Width and height aren’t responsive. Transform was. @Amaresh S M, yes I’m trying to make title-img div the size of the image itself so it responds to commands again.

Comment posted by Carter Pochynok

@RichardYan I’m missing divs because this is only a fragment of the overall page code.

Comment posted by Carter Pochynok

Yeah, transform was the only property that would respond to scale the image. Before I did this the image was so large it was causing a page overflow. This made it so the image was centered where I wanted along the x-axis, but now there’s massive whitespace around it.

Comment posted by Carter Pochynok

Turns out that manually re-scaling the image in inkscape and then eliminating the css transform property was the way to go. Didn’t know that transform didn’t adjust the object footprint, only the object itself. That’s good to know. Probably a good thing I don’t use this attribute very often…

Comment posted by Carter Pochynok

I’ll try that. The original image was massive. Like, page-breaking massive. Scaling down was the only thing that could get it to fit in an article-type format.

Comment posted by Carter Pochynok

Unfortunately, this made no difference in the image space issue or the div size issue. May just give-up and try a manual re-scale via inkscape.