{"id":1133,"date":"2013-03-15T18:19:23","date_gmt":"2013-03-15T23:19:23","guid":{"rendered":"http:\/\/wptest.io\/demo\/?page_id=1080"},"modified":"2013-03-15T18:19:23","modified_gmt":"2013-03-15T23:19:23","slug":"page-image-alignment","status":"publish","type":"page","link":"https:\/\/en.passengereye.com\/pt\/features\/page-image-alignment\/","title":{"rendered":"Alinhamento da imagem da p\u00e1gina"},"content":{"rendered":"<p>Bem-vindo ao alinhamento de imagens! A melhor forma de demonstrar o fluxo e refluxo das v\u00e1rias op\u00e7\u00f5es de posicionamento de imagens \u00e9 aninh\u00e1-las num oceano de palavras. Pegue num remo e vamos come\u00e7ar.<\/p>\n<p>No que diz respeito ao alinhamento, \u00e9 de salientar que os utilizadores podem escolher entre as op\u00e7\u00f5es de\u00a0<em>Nenhum<\/em>,\u00a0<em>Esquerda<\/em>,\u00a0<em>Certo, <\/em>e\u00a0<em>Centro<\/em>. Para al\u00e9m disso, tamb\u00e9m t\u00eam a possibilidade de\u00a0<em>Miniatura<\/em>,\u00a0<em>M\u00e9dio<\/em>,\u00a0<em>Grande<\/em>\u00a0&amp;\u00a0<em>Tamanho normal<\/em>.<\/p>\n<p style=\"text-align:center;\"><img loading=\"lazy\" class=\"size-full wp-image-906 aligncenter\" title=\"Alinhamento de imagem 580x300\" alt=\"Image Alignment 580x300\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-580x300.jpg\" width=\"580\" height=\"300\" \/><\/p>\n<p>A imagem acima \u00e9\u00a0<em><strong>centrado<\/strong><\/em>.<\/p>\n<p><strong><img loading=\"lazy\" class=\"size-full wp-image-904 alignleft\" title=\"Alinhamento de imagem 150x150\" alt=\"Image Alignment 150x150\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-150x150.jpg\" width=\"150\" height=\"150\" \/><\/strong>O resto deste par\u00e1grafo \u00e9 um enchimento para ver o texto a envolver a imagem 150\u00d7150, que \u00e9 <em><strong>alinhado \u00e0 esquerda<\/strong><\/em>.\u00a0<strong><\/strong><\/p>\n<p>Como pode ver, deve haver algum espa\u00e7o acima, abaixo e \u00e0 direita da imagem. O texto n\u00e3o deve estar a rastejar sobre a imagem. O rastejamento n\u00e3o \u00e9 correto. As imagens tamb\u00e9m precisam de espa\u00e7o para respirar. Deixem-nas falar como as vossas palavras. Deixem-nas fazer o seu trabalho sem qualquer inc\u00f3modo do texto. Em mais uma frase, veremos que o texto se move da direita da imagem para baixo da imagem numa transi\u00e7\u00e3o perfeita. Mais uma vez, deixando o texto fazer o seu trabalho. Miss\u00e3o cumprida!<\/p>\n<p>E agora, para um <em><strong>imagem de grandes dimens\u00f5es<\/strong><\/em>. Tem tamb\u00e9m <em><strong>sem alinhamento<\/strong><\/em>.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone  wp-image-907\" title=\"Alinhamento de imagem 1200x400\" alt=\"Image Alignment 1200x400\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-1200x4002.jpg\" width=\"1200\" height=\"400\" \/><\/p>\n<p>A imagem acima, embora tenha 1200 px de largura, n\u00e3o deve transbordar a \u00e1rea de conte\u00fado. Deve permanecer contida, sem perturbar visivelmente o fluxo do conte\u00fado.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-905 alignright\" title=\"Alinhamento de imagem 300x200\" alt=\"Image Alignment 300x200\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-300x200.jpg\" width=\"300\" height=\"200\" \/><\/p>\n<p>E agora vamos mudar as coisas para o <em><strong>alinhamento \u00e0 direita<\/strong><\/em>. Mais uma vez, deve haver muito espa\u00e7o em cima, em baixo e \u00e0 esquerda da imagem. Olha s\u00f3 para ele... Eh p\u00e1! Boa maneira de arrasar com o lado direito. N\u00e3o me interessa o que a imagem alinhada \u00e0 esquerda diz, tu est\u00e1s \u00f3timo. N\u00e3o deixes que ningu\u00e9m te diga o contr\u00e1rio.<\/p>\n<p>Daqui a pouco, deve ver o texto a come\u00e7ar a ficar por baixo da imagem alinhada \u00e0 direita e a assentar bem. Ainda deve haver bastante espa\u00e7o e tudo deve estar bem posicionado. Sim... Assim mesmo. Nunca foi t\u00e3o bom estar certo.<\/p>\n<p>E quando pensavam que j\u00e1 t\u00ednhamos terminado, vamos fazer tudo de novo com legendas!<\/p>\n<div id=\"attachment_906\" style=\"width: 590px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-906\" loading=\"lazy\" class=\"size-full wp-image-906\" title=\"Alinhamento de imagem 580x300\" alt=\"Image Alignment 580x300\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-580x300.jpg\" width=\"580\" height=\"300\" \/><p id=\"caption-attachment-906\" class=\"wp-caption-text\">Veja 580\u00d7300 a obter alguns <a title=\"Defini\u00e7\u00f5es de imagem\" href=\"http:\/\/en.support.wordpress.com\/images\/image-settings\/\">legenda<\/a> amor.<\/p><\/div>\n<p>A imagem acima \u00e9\u00a0<em><strong>centrado<\/strong><\/em>. A legenda tamb\u00e9m tem uma hiperliga\u00e7\u00e3o, s\u00f3 para ver se faz alguma coisa de estranho.<\/p>\n<div id=\"attachment_904\" style=\"width: 160px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-904\" loading=\"lazy\" class=\"size-full wp-image-904\" title=\"Alinhamento de imagem 150x150\" alt=\"Image Alignment 150x150\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-150x150.jpg\" width=\"150\" height=\"150\" \/><p id=\"caption-attachment-904\" class=\"wp-caption-text\">Legenda pequenina.<\/p><\/div>\n<p><strong><\/strong>O resto deste par\u00e1grafo \u00e9 um enchimento para ver o texto a envolver a imagem 150\u00d7150, que \u00e9 <em><strong>alinhado \u00e0 esquerda<\/strong><\/em>.\u00a0<strong><\/strong><\/p>\n<p>Como pode ver, deve haver algum espa\u00e7o acima, abaixo e \u00e0 direita da imagem. O texto n\u00e3o deve estar a rastejar sobre a imagem. O rastejamento n\u00e3o \u00e9 correto. As imagens tamb\u00e9m precisam de espa\u00e7o para respirar. Deixem-nas falar como as vossas palavras. Deixem-nas fazer o seu trabalho sem qualquer inc\u00f3modo do texto. Em mais uma frase, veremos que o texto se move da direita da imagem para baixo da imagem numa transi\u00e7\u00e3o perfeita. Mais uma vez, deixando o texto fazer o seu trabalho. Miss\u00e3o cumprida!<\/p>\n<p>E agora, para um <em><strong>imagem de grandes dimens\u00f5es<\/strong><\/em>. Tem tamb\u00e9m <em><strong>sem alinhamento<\/strong><\/em>.<\/p>\n<div id=\"attachment_907\" style=\"width: 1210px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-907\" loading=\"lazy\" class=\"wp-image-907\" title=\"Alinhamento de imagem 1200x400\" alt=\"Image Alignment 1200x400\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-1200x4002.jpg\" width=\"1200\" height=\"400\" \/><p id=\"caption-attachment-907\" class=\"wp-caption-text\">Coment\u00e1rio de imagem maci\u00e7o para os seus olhos.<\/p><\/div>\n<p>A imagem acima, embora tenha 1200 px de largura, n\u00e3o deve transbordar a \u00e1rea de conte\u00fado. Deve permanecer contida, sem perturbar visivelmente o fluxo do conte\u00fado.<\/p>\n<div id=\"attachment_905\" style=\"width: 310px\" class=\"wp-caption alignright\"><img aria-describedby=\"caption-attachment-905\" loading=\"lazy\" class=\"size-full wp-image-905\" title=\"Alinhamento de imagem 300x200\" alt=\"Image Alignment 300x200\" src=\"http:\/\/demo.leafcolor.com\/applay\/wp-content\/uploads\/2013\/03\/image-alignment-300x200.jpg\" width=\"300\" height=\"200\" \/><p id=\"caption-attachment-905\" class=\"wp-caption-text\">\u00c9 bom estar sempre certo.<\/p><\/div>\n<p>E agora vamos mudar as coisas para o <em><strong>alinhamento \u00e0 direita<\/strong><\/em>. Mais uma vez, deve haver muito espa\u00e7o em cima, em baixo e \u00e0 esquerda da imagem. Olha s\u00f3 para ele... Eh p\u00e1! Boa maneira de arrasar com o lado direito. N\u00e3o me interessa o que a imagem alinhada \u00e0 esquerda diz, tu est\u00e1s \u00f3timo. N\u00e3o deixes que ningu\u00e9m te diga o contr\u00e1rio.<\/p>\n<p>Daqui a pouco, deve ver o texto a come\u00e7ar a ficar por baixo da imagem alinhada \u00e0 direita e a assentar bem. Ainda deve haver bastante espa\u00e7o e tudo deve estar bem posicionado. Sim... Assim mesmo. Nunca foi t\u00e3o bom estar certo.<\/p>\n<p>E \u00e9 tudo, yo! Sobreviveste \u00e0s \u00e1guas tumultuosas do alinhamento. Conquista de alinhamento de imagem desbloqueada!<\/p>","protected":false},"excerpt":{"rendered":"<p>Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let&#8217;s get [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":12,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/pages\/1133"}],"collection":[{"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":0,"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/pages\/1133\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/pages\/12"}],"wp:attachment":[{"href":"https:\/\/en.passengereye.com\/pt\/wp-json\/wp\/v2\/media?parent=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}