Em muitos casos é preciso ter imagens nossas online para se poder usar o adereço absoluto delas e poder usar esse endereço em diversas situações, assim como por exemplo para usar uma class de CSS na tag da imagem afim da imagem ficar responsiva.
Aqui neste simples site no blogger onde criei um pequeno e muito simples template estou a usar as ligações á plataforma Bootstrap, ajuda e simplifica muita coisa e todo o site fica responsivo. Mas para usar as classes do Bootstrap incluindo a que faz as imagens serem responsivas tenho que inserir na tag das imagens a class do Bootstrap (img-responsive) e também o link absoluto da imagem. Se eu usar a mesma imagem com o código do blogger a imagem simplesmente fica com largura e altura fixa.
Querendo ter imagens responsivas no blogger, o que penso ser bastante importante, tem que se de uma maneira ou de outra trabalhar a tag da imagem. No blogger é bastante fácil fazer upload a uma imagem e usar o link absoluto em qualquer página mesmo fora do blogger.
Quase todos os servidores onde se faz uploads a muitas das nossas imagens disponibilizam o link que pode ser inserido numa tag criada por nós.
Aqui estão apresentadas 3 imagens responsivas cada qual com a sua class. Mas com 3 adereços absolutos a serem puxadas de 3 servidores diferentes.
Imagem com adereço absoluto do Blogger com class Bootstrap
Imagem com adereço absoluto do Facebook com class Bootstrap
Imagem com adereço absoluto da Dropbox com class Bootstrap
Aqui pode-se ver o código HTML das 3 imagens acima, cada uma delas com a class Bootstrap dentro das tags.
Esta apresentação de código está codificado com 2 divs e 6 classes do CSS frameworks da w3schools.
Em certas situações uso algumas classes deste CSS framework em conjunto com classes do Bootstrap.
Aqui estou a usar essa mistura de classes.
https://www.w3schools.com/w3css/default.asp
Codigo HTML das 3 imagens
<h4>Imagem com adereço absoluto do Blogger com class Bootstrap</h4>
<img src="https://4.bp.blogspot.com/-_H9VLoKs_po/WwWibk8VUeI/AAAAAAAATPk/t4Rau0fBdbA2f0ZvFH2Mtfob9GfkE89NQCLcBGAs/s1600/curso_maquina_corte.png" class="img-responsive" alt="Responsive image" title="Imagem com adereço absoluto do Blogger com class Bootstrap">
<h4>Imagem com adereço absoluto do Facebook com class Bootstrap</h4>
<img src="https://scontent.flis8-2.fna.fbcdn.net/v/t1.0-9/33226044_941631109342087_2623245112477483008_n.jpg?_nc_cat=0&oh=4eb28f9e91d4b9578bbe9d418d598f99&oe=5B904CC8" class="img-responsive" alt="Responsive image" title="Imagem com adereço absoluto do Facebook com class Bootstrap">
<h4>Imagem com adereço absoluto da Dropbox com class Bootstrap</h4>
<img src="https://photos-2.dropbox.com/t/2/AAAmvdrNqC9ZQpwh9B13FsQo9C6FNKb5p15Z4zuxX9k2yw/12/14404873/png/32x32/1/_/1/2/curso_excel.png/EO-n2woYjaEBIAIoAg/A77aEyNzizGj5V6BDZRF7GwuaBGBpNUcXtwFUP9TQzw?preserve_transparency=1&size=2048x1536&size_mode=3" class="img-responsive" alt="Responsive image" title="Imagem com adereço absoluto da Dropbox com class Bootstrap">
Sem comentários:
Enviar um comentário