Padding reducing the image

Question

I have an image with a background worked, in this image I’m giving padding equal 140px, but instead of the image increase the padding, and consequently, get a bigger box, the image is reducing, increasing the padding to inside the image while maintaining the ratio of the image?

The problem started when I migrated the content to a container from another page that uses bootstrap. Does anyone have any idea what might be going on in this CSS?

This is the version of old padding (Jsfiddle):

img.image.resize { }

If it increases from 140px to 300px for example it increases everything (but in the new one I’m doing it does not do this...

See in the picture, what happens when I shoot the padding:

Answer 1

The problem is that Bootstrap has by default all elements with box-sizing border-box. With this, the image size adjusts in relation to its edges, not its content.

To solve this we need to change the box-sizing for content-box. Just add in the class mentioned in the question:

img.image.resize {
    box-sizing: content-box;
}

If you want to apply to all page elements the default value style:

* {
    box-sizing: content-box;
}