Once upon a time, in the world of HTML and CSS, there existed a lonely div. This lonely div longed for companionship, and one day, an inline img came to visit. They formed a bond and became good friends. But, no matter how hard the img tried, it couldn't completely fill the void in the div and so the lonely div remained in a state of melancholy:
HTML:
<div><img src="..."></img></div>
CSS:
div {
background-color: red;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
}
img {
display: inline-block;
height: 16px;
width: auto;
position: relative;
background-color: green;
}
Who holds the key to curing the div's sense of emptiness?
Update: The original fiddle can be found here.