Índice
Navegadores da web como Firefox, Chrome, Safari, Opera, etc. Todos eles siga as regras sobre como redimensionar os elementos, dependendo do fluxo e do layout da páginaEssas regras podem ser muito detalhadas, mas é o que nos permite especificar como os elementos devem ser tratados para que os tamanhos sejam sempre mantidos na proporção do que queremos deles.Propriedades de tamanho
Existem algumas propriedades de tamanho que nos permitem dizer ao navegador como ele deve interpretar nossos elementos, vamos ver uma lista deles antes de ir para seu aplicativo:
Largura altura: Eles configuram a largura e a altura de um elemento, os valores que ele pode assumir são os seguintes: auto e.
largura mínima / altura mínima: Ele nos permite definir a largura ou altura mínima para um elemento, os valores que ele pode assumir são os seguintes: auto e
max-width / max-height: Define a altura ou largura máxima aceitável para um elemento, seus valores possíveis são: auto e
tamanho da caixa: Estabelece qual parte da caixa do elemento é ocupada pelo tamanho, as disponíveis são: content-box padding-box border-box margin-box.
Se você não definir nenhum valor para as propriedades visualizadas, o valor padrão será: auto, mesmo que não seja especificado, o que significa que o navegador será quem definirá os tamanhos, também como vimos podemos definir os tamanhos usando medidas de comprimento ou porcentagens, as porcentagens sendo calculadas com base na largura do elemento de contêiner.
Depois de ver a teoria, vamos agora entrar em prática, vamos ver o seguinte código onde vamos definir o tamanho de dois elementos para que possamos ver como tudo isso funciona:
Exemplo
Como podemos ver, o que fizemos aqui é muito simples, estabelecemos uma largura e uma altura para o elemento div da página, então especificamos dois identificadores onde colocamos cada um diferente tamanho da caixaVamos ver o que tudo isso gera para nós:
O que acontece se brincarmos um pouco com o redimensionamento do tamanho da janela do navegador, sabemos que o div terá 75% do tamanho do seu container, neste caso seu container é o corpo que muda com a janela e por sua vez a imagem com seletor #primeiro É 50% da largura do seu container, que neste caso é div, quando vemos isso sabemos que algo não vai ficar como está, vamos ver o que acontece no navegador com tudo isso.
PROLONGAR
