Dimensões no CSS Exacta, Máxima, Mínima

Nota: As imagens utilizadas nos exemplos deste artigo foram retiradas do site Heromorph.

Se gostam de arte digital e BD, façam uma visita e se quiserem juntem-se à comunidade que não se vão arrepender. ;)

Ao pensar em algo para escrever um artigo, lembrei-me dum comentário que deixei num blogue e apercebi-me que algumas pessoas talvez desconheçam algumas das vantagens que se pode utilizar ao dar estilos no CSS a qualquer elemento que se tenha no blogue.

Não vou falar neste artigo de todas as regras que podemos colocar ao dar estilos no CSS (sombra, posição, fundo, rotação e muito mais...) porque isso dá matéria para muitos artigos. =D

Não, o assunto deste artigo é a largura e altura dos elementos num blogue que pode ser uma imagem ou qualquer outro elemento dentro de um artigo tipo citações (blockquote), ou qualquer elemento presente no blogue seja na parte principal ou na barra lateral, cabeçalho, etc...

Para explicar melhor, vou criar uma div, que vamos chamar exemplo1 e dar alguns estilos básicos:

um texto qualquer

/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
}
/* A parte HTML */
<div class="exemplo1">um texto qualquer</div>

Notem a parte do código nas linhas 8 e 9. Essa é a parte onde definimos a largura (width) e altura (height) de um elemento.

Para efeitos de demonstração, vamos imaginar que a div exemplo1 acima é o espaço dos artigos de um blogue.

Então como em qualquer artigo,além do texto podemos colocar algumas imagens:

um texto qualquer

mais texto...

Como podem ver, a imagem maior sai fora do espaço designado e se fosse no caso de ser o espaço do artigo, podia aparecer por cima ou escondida por baixo da barra lateral.

Para corrigir isso, muitos blogues têm no CSS mais uma regra:

/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
overflow:hidden;
}

E o resultado:

um texto qualquer

mais texto...

Mas aí a imagem maior aparece cortada. Claro que podemos editar a imagem maior e definir um tamanho que se adapte ao tamanho da div exemplo1... mas, e se não pudermos fazer isso?

Imaginemos que o elemento que sobressaia era algo a que não tínhamos acesso ao código e só podíamos definir pelo tipo, neste caso as imagens (img).

Sabendo o tipo de elemento, podemos dar estilo no CSS e adicionar uma regra para definir um tamanho que não seja superior ao do exemplo1.

Mas aí temos outro problema.

Existe outra imagem mais pequena e se definirmos uma largura especifica para as imagens no exemplo1, TODAS as imagens vão ser afectadas.

Como não desejamos isso, como resolver a situação?

Definindo a largura máxima (max-width) que um elemento deve ter. As outras regras que podemos usar são largura mínima (min-width), altura máxima (max-height) e altura mínima (min-height), conforme o caso.

O que resulta em:

um texto qualquer

mais texto...

/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
overflow:hidden;  
}
.exemplo1 img {
max-width:400px;
}

E então? Já conheciam estas maneiras de definir a largura ou altura de um elemento do blogue?

É de utilidade para vocês?

Eu aqui no blogue, utilizo todas as opções em vários elementos. Conseguem descobrir em quais? ;D

Até Breve. :-F

Queres ler outro artigo ao calhas?