2

I'm using max-width:100%; and max-height:100%; for my img tag. There's a container around the img, and for some reason extra whitespace appears next to the image, on the right.

enter image description here

The container's width is not fixed, so it should be the same, like the image + 15px padding on every side.

CSS

    *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}

li {
  height:100px;
  display: inline-block;
  background: lightblue;
  padding: 15px;
}

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

HTML

<ul>
  <li><img src="http://lorempixel.com/1450/600/"></li>
</ul>

Codepen: http://codepen.io/anon/pen/mJJqzo

user1452062
  • 805
  • 4
  • 12
  • 27

5 Answers5

1

You want same padding without changing width. Comment following CSS:

/*-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;*/

See DEMO showing same output in FF and Chrome.

Manwal
  • 23,450
  • 12
  • 63
  • 93
  • I need the border-box property. I would like to reduce the size with 15px on all side – user1452062 May 01 '15 at 13:38
  • @user1452062 So reduce the height with 30px then. http://codepen.io/anon/pen/JddpWd – timo May 01 '15 at 13:50
  • Honestly I would like to find a solution to fix this issue in firefox without removing any of my styles. – user1452062 May 01 '15 at 13:53
  • After using `box-sizing: content-box;` you can use any height you want. I think this is best solution for your situation. – Manwal May 01 '15 at 13:54
  • Is it possible with border-box? I don't want to remove/modify the original styles. – user1452062 May 01 '15 at 13:55
  • @user1452062 You will have to change SOMETHING from your style, since this is causing the issue. If you change `box-sizing` to `content-box` for the specific element that is causing this issue, you will keep the changes to a minimun however. Like in my example. – timo May 01 '15 at 13:55
  • @user1452062 yes adding `box-sizing: content-box;` to `li` is better. – Manwal May 01 '15 at 13:57
  • 1
    This solution can solve the problem, but I would like to understand why is it happens in Firefox. In chrome my code works. – user1452062 May 01 '15 at 16:30
0

Please try below css :

li {
    background: lightblue none repeat scroll 0 0;
    display: inline-block;
    height: 100px;
    padding: 15px;
    width: 204px;
}
img {
   height: auto;
   width: 100%;
}
sonu jangid
  • 1
  • 2
  • unfortunately it's not the solution. Please don't modify the width and the height. – user1452062 May 01 '15 at 13:31
  • ok now please try this code: li { background: lightblue none repeat scroll 0 0; display: inline-block; height: 100px; padding: 15px; width: 20%; } If you won't fix li width then it will be show on full screen. – sonu jangid May 01 '15 at 13:35
0

One possible solution would be to do something like this:

li {
padding: 0px;
}

img {
padding: 0px;
}

Since you say the image doesn't need to have a modified size, simply removing the padding could be one way to remove the white space.

Fishy
  • 45
  • 11
0

Use a CSS reset, it will fix everything like this that you may encounter. I suggest Eric Meyer's.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
kingkapd
  • 69
  • 8
-1

Add a width to the li.

li{ width:200px; }
K2R
  • 143
  • 1
  • 1
  • 9