2

Tenho uma imagem com um fundo trabalhado, nesta imagem estou dando padding igual 140px, porém em vez da imagem aumentar o padding, e consequentemente, ficar um box maior, a imagem está reduzindo, aumentando o padding para dentro da imagem mantendo a proporção da imagem?

O problema começou quando eu migrei o conteúdo para um container de outra página que utiliza bootstrap. Alguém faz ideia do que pode estar havendo neste CSS?

Esta é a versão do padding antigo (JSFiddle):

img.image.resize { }

Se aumentar de 140px para 300px por exemplo ele aumenta tudo (mas no novo que estou fazendo ele não faz isso...

Veja na imagem, o que acontece quando tiro o padding:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

3
  • Inclua o código em sua pergunta, utilizando o snippet Commented 17/04/2018 às 21:12
  • o problema é que é muito código. Commented 17/04/2018 às 21:16
  • Cara, pra que serve "matrix(0.190268, 0, 0, 0.190268, 4, -35)"? Tenta tirar isso pra ver se te ajuda. Tira o padding e trabalha com altura e largura fixa. Commented 17/04/2018 às 22:19

1 Resposta 1

1

O problema é que o Bootstrap tem por padrão todos os elementos com box-sizing border-box. Com isso, o tamanho da imagem se ajusta em relação às suas bordas, e não ao seu conteúdo.

Para resolver isso é preciso alterar o box-sizing para content-box. Basta adicionar na classe mencionada na pergunta:

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

Se quiser aplicar a todos os elementos da página o valor padrão do estilo:

* {
    box-sizing: content-box;
}
1
  • valeu, na mosca! Commented 18/04/2018 às 14:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .