CSS img max-width: 100%

Question 1

Se nós especificar max-width: 100% para um elemento de imagem (por exemplo, uma imagem de 250px * 500px) e nós colocamos essa imagem dentro de um elemento pai de 1000px de largura e, em seguida, se o pai é diminuído <= 500px, a imagem será reduzida de acordo, para ocupar o comprimento total do pai. No entanto, se o pai de largura está em > 500px, a imagem não ser escalado, mas no seu original 500px.

O que me confunde é o significado de 100% aqui. No meu entendimento, a porcentagem relativa é sempre com relação a seu pai. Isso não significa que a largura máxima é sempre a largura atual de seu pai? Por isso, a imagem será sempre encolhido/dimensionado para se ajustar a seus pais, porque a largura máxima é de 100%? O que estou mal-entendido aqui? como compreender a porcentagem relativa usado no max-width neste caso? O que é relativo? Obrigado!

Question 2

Sim, há uma diferença entre width e max-width.

Esta definição de w3school irá tornar mais fácil para você entender.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

O max-width propriedade define a largura máxima de um elemento.

Se o conteúdo for maior do que a largura máxima, ele irá automaticamente alterar a altura do elemento.

Se o conteúdo for menor do que a largura máxima, a max-width a propriedade não tem efeito.

Nota: Isso impede que o valor da width propriedade de tornar-se maior do que max-width. O valor da max-width substituições de propriedades o width propriedade.

Chegando à sua pergunta agora, se você substituir max-width com width e verifique a largura da imagem para o ponto de ruptura >=500px ou <500px, torna-curso de pais largura total.

Mas como é mencionado a partir da definição acima, max-width torna-se o elemento de largura não ir acima de uma certa largura (não importa qual é a largura pai) e que é por isso que a propriedade tinha trazido.

Imran Rafiq Rather · Answer 1 · 2021-11-24T03:21:07

Sim, há uma diferença entre width e max-width.

Esta definição de w3school irá tornar mais fácil para você entender.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

O max-width propriedade define a largura máxima de um elemento.

Se o conteúdo for maior do que a largura máxima, ele irá automaticamente alterar a altura do elemento.

Se o conteúdo for menor do que a largura máxima, a max-width a propriedade não tem efeito.

Nota: Isso impede que o valor da width propriedade de tornar-se maior do que max-width. O valor da max-width substituições de propriedades o width propriedade.

Chegando à sua pergunta agora, se você substituir max-width com width e verifique a largura da imagem para o ponto de ruptura >=500px ou <500px, torna-curso de pais largura total.

Mas como é mencionado a partir da definição acima, max-width torna-se o elemento de largura não ir acima de uma certa largura (não importa qual é a largura pai) e que é por isso que a propriedade tinha trazido.

você deve usar fontes oficiais em vez disso, como o W3C, ou MDN. w3schools é imprecisa.
@Raptor: eu admiro o seu aconselhar, eu mesmo prefiro fontes oficiais. No entanto MDN ou W3C ainda não é ruim para iniciantes. Todos nós iniciado a partir destes sites e com o tempo, porém, percebemos w3c não tem alguns problemas, em alguns casos, mas para um novato para entender um ponto, eu não acho que é ruim para compartilhar :) de qualquer forma, Obrigado

CSS img max-width: 100%

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria