Padding reducing image

Question

Padding reducing image

Navigation

#1 by (1 votes)

2

I have an image with a background worked, in this image I'm giving padding equal 140px, however instead of the image increase the padding, and consequently, getting a bigger box, the image is reducing, increasing the padding into the image keeping the aspect ratio?

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

This is the version of old padding (JSFiddle) :

img.image.resize { }

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

Look at the picture, what happens when I shoot the padding:

css css3 bootstrap

asked by anonymous 17.04.2018 / 23:02

1 answer

Scroll-based loading bar Pipe not found - Angular 5

score 1 · Accepted Answer

The problem is that Bootstrap defaults to all elements with box-sizing border-box . Thus, the size of the image fits in relation to its borders, not its contents.

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

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

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

* {
    box-sizing: content-box;
}