CODEWITHSUNDEEP
htmlcssfirefoxbutton
lampshade
lampshade

Reputation: 2796

Firefox adds extra space around image in button with border

I have an <img> in a <button>. The button has a border. The image is scaled to 100% height and the width of the button is determined by the calculated image width. So far so good, as it works as long as there's no border on the button. If I add a border, Firefox is going to downscale the image but not to adjust to the new image width. It will simply add extra space. Chrome and Safari are doing this as expected – or at least as I expect it.

How can I get Firefox to behave the same?

Figure

You can see the extra green area I'm trying to get rid of.

enter image description here

HTML

<div class="wrapper">
    <button>
        <img src="//placehold.it/160x90">
    </button>
</div>

CSS

.wrapper {
    height: 100px;
}

button {
    height: 100%;
    padding: 0;
    background: green;
    border: 0;
    border: 3px solid tomato;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button img {
    height: 100%;
    width: auto;
}

Fiddle

https://jsfiddle.net/4tjmmq58/

Upvotes: 0

Views: 462

Answers (3)

Mostafa Mohammadzadeh
Mostafa Mohammadzadeh

Reputation: 911

set images max-width and max-height:

.img{
    height: auto;
    max-height: 100px; // your container height
    width: auto;
    max-width: 178px; // 16:9
}

Upvotes: 0

xpy
xpy

Reputation: 5621

You just need to add box-sizing: content-box; to the button and your problem will be fixed but another will emerge. Now your border won't be calculated in the elements width/height so you may have to subtract it by manually.

Upvotes: 0

Panchi
Panchi

Reputation: 305

That is how Firefox interprets the div tag to add the width div but you can just change the css to be like the following:

.wrapper {
    height: 100px;
    width: 170px;
}

button {
    height: 100%;
    padding: 0;
    background: green;
    border: 0;
    border: 3px solid tomato;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button img {
    height: 100%;
    width: auto;
}

and this should fix the over-sized div around the button. But I would recommend using different browsers and <tags> when doing what your doing.

reference: http://www.w3schools.com/cssref/pr_dim_width.asp

Upvotes: 1

Related Questions