[Solved] White space appaers next to responsive image

[rlnl]

Hi, I have a <div> with fixed height and padding. The border-box property is applied on the whole page. Inside the <div> I have an <img> with max-width:100%, and max-height:100% properties.

<code class="css">*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#responsive-image {
    height:150px;
    border:1px solid red;
    display:inline-block;
    float:left;
    padding:15px;
}

img {
    max-width:100%;
    max-height:100%;
}

The div should be same as the width. (+15px padding on left and right)
I have a CodePen link: http://codepen.io/anon/pen/dooGor

I would like to get rid of the whitespace on the right.

Thank you!

[Paulie_D]

Float & Inline-block are incompatible…pick one or the other.

Images should be max-width or max-height..not both.

I’m not really clear on what you are trying to do..the Codepen doesn’t seem to have any whitespace on the right.

[rlnl]

I forgot to mention that the problem appears in Firefox: http://note.io/1Iq3RgJ

I used max-width and max-height because I would like to reduce the height and the width too.

What is the best solution?

[Paulie_D]

Yeah…it’s a combination of the padding, box-sizing and the max-whatever you’re applying to the image.

As I said, you can’t have max-height and max-width as 100% at the same time…you have to pick one or the other (at least AFAIK).

That said, max-height is pretty unusual, normally I would expect to see max-width for responsiveness

Something is borked in FF somewhere..or it could be that they are doing it right and everyone else is doing it wrong. :)

[rlnl]

I changed max-width to auto, and it’s same :/

http://codepen.io/anon/pen/dooGor

I’m working on a header, where the height is not always the same. On some pages it’s 100px, on other it’s only 60px. That’s why I want responsive height for the logo. Do you know solution for this?

[Paulie_D]

I’m working on a header, where the height is not always the same. On some pages it’s 100px, on other it’s only 60px.

So something like this?

http://codepen.io/Paulie-D/pen/QbbGyx

[rlnl]

Yes, something like this, but what happens if the width of the div is smaller than the image? Is it possible to use responsive styles for width and height together?

http://codepen.io/anon/pen/oXXYyB

[Paulie_D]

Yes, something like this, but what happens if the width of the div is smaller than the image?

Why would it be? This is a header right?

Perhaps you need to be thinking about background images instead.

[rlnl]

Yes it’s a header, and the image is a logo. So it’s not possible to use an image with responsive with and height, right?

[Paulie_D]

So it’s not possible to use an image with responsive with and height, right?

Not really…one or the other.

Things don’t usually get “taller” when we’re talking about responsiveness, just wider and narrower.

I’m not really sure why the “logo” would be wider than the header though.

[rlnl]

You are right. I accepted the answer.

By the way for a full screen image the viewports height/width can be smaller so in that case it’s useful.

[Author]

Posts