{"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\/es\/features\/page-image-alignment\/","title":{"rendered":"Alineaci\u00f3n de im\u00e1genes de p\u00e1gina"},"content":{"rendered":"

\u00a1Bienvenido a la alineaci\u00f3n de im\u00e1genes! La mejor manera de demostrar el flujo y reflujo de las distintas opciones de posicionamiento de im\u00e1genes es anidarlas c\u00f3modamente entre un oc\u00e9ano de palabras. Coge un remo y empecemos.<\/p>\n

En cuanto a la alineaci\u00f3n, cabe se\u00f1alar que los usuarios pueden elegir entre las opciones de\u00a0Ninguno<\/em>,\u00a0Izquierda<\/em>,\u00a0Bien, <\/em>y\u00a0Centro<\/em>. Adem\u00e1s, tambi\u00e9n tienen las opciones de\u00a0Miniaturas<\/em>,\u00a0Medio<\/em>,\u00a0Grande<\/em>\u00a0&\u00a0Fullsize<\/em>.<\/p>\n

\"Image<\/p>\n

La imagen de arriba resulta ser\u00a0centrado<\/strong><\/em>.<\/p>\n

\"Image<\/strong>El resto de este p\u00e1rrafo es de relleno para ver el texto que envuelve la imagen de 150\u00d7150, que es alineado a la izquierda<\/strong><\/em>.\u00a0<\/strong><\/p>\n

Como puede ver, debe haber algo de espacio por encima, por debajo y a la derecha de la imagen. El texto no deber\u00eda arrastrarse sobre la imagen. Arrastrarse no est\u00e1 bien. Las im\u00e1genes tambi\u00e9n necesitan espacio para respirar. D\u00e9jalas hablar como si fueran palabras. Deja que hagan su trabajo sin que el texto las moleste. En una frase m\u00e1s, veremos que el texto se desplaza desde la derecha de la imagen hasta debajo de ella en una transici\u00f3n perfecta. Una vez m\u00e1s, dejamos que haga su trabajo. Misi\u00f3n cumplida.<\/p>\n

Y ahora imagen de gran tama\u00f1o<\/strong><\/em>. Tambi\u00e9n dispone de sin alineaci\u00f3n<\/strong><\/em>.<\/p>\n

\"Image<\/p>\n

La imagen de arriba, aunque tiene 1200px de ancho, no debe desbordar el \u00e1rea de contenido. Debe permanecer contenida sin interrumpir visiblemente el flujo del contenido.<\/p>\n

\"Image<\/p>\n

Y ahora vamos a cambiar las cosas a la alinear a la derecha<\/strong><\/em>. De nuevo, deber\u00eda haber mucho espacio por encima, por debajo y a la izquierda de la imagen. M\u00edralo ah\u00ed... \u00a1Eh, t\u00edo! Qu\u00e9 bien te queda el lado derecho. No me importa lo que diga la imagen alineada a la izquierda, est\u00e1s genial. No dejes que nadie te diga lo contrario.<\/p>\n

En un momento, deber\u00eda ver que el texto empieza a envolverse debajo de la imagen alineada a la derecha y se acomoda bien. Todav\u00eda debe haber un mont\u00f3n de espacio y todo debe estar sentado bastante. S\u00ed... Justo as\u00ed. Nunca se sinti\u00f3 tan bien estar bien.<\/p>\n

Y cuando cre\u00edas que ya hab\u00edamos terminado, \u00a1vamos a volver a hacerlas con pies de foto!<\/p>\n

\"Image

Mira 580\u00d7300 conseguir algunos leyenda<\/a> amor.<\/p><\/div>\n

La imagen de arriba resulta ser\u00a0centrado<\/strong><\/em>. El pie de foto tambi\u00e9n tiene un enlace en \u00e9l, s\u00f3lo para ver si hace algo funky.<\/p>\n

\"Image

Peque\u00f1o pie de foto.<\/p><\/div>\n

<\/strong>El resto de este p\u00e1rrafo es de relleno para ver el texto que envuelve la imagen de 150\u00d7150, que es alineado a la izquierda<\/strong><\/em>.\u00a0<\/strong><\/p>\n

Como puede ver, debe haber algo de espacio por encima, por debajo y a la derecha de la imagen. El texto no deber\u00eda arrastrarse sobre la imagen. Arrastrarse no est\u00e1 bien. Las im\u00e1genes tambi\u00e9n necesitan espacio para respirar. D\u00e9jalas hablar como si fueran palabras. Deja que hagan su trabajo sin que el texto las moleste. En una frase m\u00e1s, veremos que el texto se desplaza desde la derecha de la imagen hasta debajo de ella en una transici\u00f3n perfecta. Una vez m\u00e1s, dejamos que haga su trabajo. Misi\u00f3n cumplida.<\/p>\n

Y ahora imagen de gran tama\u00f1o<\/strong><\/em>. Tambi\u00e9n dispone de sin alineaci\u00f3n<\/strong><\/em>.<\/p>\n

\"Image

Comentario de imagen masiva para sus globos oculares.<\/p><\/div>\n

La imagen de arriba, aunque tiene 1200px de ancho, no debe desbordar el \u00e1rea de contenido. Debe permanecer contenida sin interrumpir visiblemente el flujo del contenido.<\/p>\n

\"Image

Sienta bien tener siempre la raz\u00f3n.<\/p><\/div>\n

Y ahora vamos a cambiar las cosas a la alinear a la derecha<\/strong><\/em>. De nuevo, deber\u00eda haber mucho espacio por encima, por debajo y a la izquierda de la imagen. M\u00edralo ah\u00ed... \u00a1Eh, t\u00edo! Qu\u00e9 bien te queda el lado derecho. No me importa lo que diga la imagen alineada a la izquierda, est\u00e1s genial. No dejes que nadie te diga lo contrario.<\/p>\n

En un momento, deber\u00eda ver que el texto empieza a envolverse debajo de la imagen alineada a la derecha y se acomoda bien. Todav\u00eda debe haber un mont\u00f3n de espacio y todo debe estar sentado bastante. S\u00ed... Justo as\u00ed. Nunca se sinti\u00f3 tan bien estar bien.<\/p>\n

Y eso es todo. Has sobrevivido a las tumultuosas aguas de la alineaci\u00f3n. Logro de alineaci\u00f3n de imagen desbloqueado.<\/p>","protected":false},"excerpt":{"rendered":"

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’s get […]<\/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\/es\/wp-json\/wp\/v2\/pages\/1133"}],"collection":[{"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":0,"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/pages\/1133\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/pages\/12"}],"wp:attachment":[{"href":"https:\/\/en.passengereye.com\/es\/wp-json\/wp\/v2\/media?parent=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}