Mostrar fotos sin distorsion del FB

[abelhoyos]

No se como explicarlo, pero haré el intento.
Utilizo un script Php para extraer fotos desde mi Fan Page de Facebook (solo fotos de portada) y mostrarlas en mi sitio web. Hasta allí todo bien.

La cosa esta en que quisiera que se muestren en una matriz uniforme sin distorsión de la imagen asi como esto:
http://moyobamba.com/albumfb2/matrizfb.jpg

Ya que solo he podido conseguir que se muestren así
http://moyobamba.com/albumfb2/index.php

El script completo lo pueden descargar desde aca
http://moyobamba.com/albumfb2/fotosfb.rar

y funciona copiandolo en una carpeta de cualquier hosting.

Gracias

[IsaBelM]

no sé que es lo que recibirás pero, puedes probar con la pseudo-clase :nth-of-type() de css3

[danicasas]

Buenas,

Creo que el fallo está en el tamaño de la imágen, le das width="150" height="100" quando deberían ser cuadradas.

[abelhoyos]

Si, seria facil que salga cuadrado y ponerle Width = 150 y Height = 150, pero yo me voy a la imagen, en la primera la imagen sale a su resolución real, es decir, sin estirarla, mientras q en la mia sale estirada y distorsionada, no se si me dejo entender.

[danicasas]

Viendo el código html de la web parece que el tamaño no es cuadrado, el la página
http://moyobamba.com/albumfb2/index.php
le das a las imágenes un tamaño rectangular de 100x150 píxeles

Si borras el height y el width puede que mantenga el tamaño original -archivo index.php línea 53-.

[Bier]

Muy interesante tu deseo.
Dentro de unas semanas la aplicaré para publicarlo en algunas web.

Gracias por compartirlo...

[abelhoyos]

Danicasa no me estas entendiendo. mira, para mi es muy facil igualar en valores al width y el heigth, pero no es lo que quiero. Yo quiero q la imagen q esta dentro del cuadrado o rectangulo no se estire o se achique, sino q mantenga su aspecto original, pero que llene todo el cuadrado o rectangulo. Asi como este ejemplo mira:
http://moyobamba.com/albumfb2/matrizfb.jpg

Espero q me hayan entendido lo q quiero hacer. Gracias

[IsaBelM]

esto se hace con css. te dejo un ejemplo, sólo has de seguir con la progresión

<a rel="sexylightbox[kmx]" title="Foto 1 de la galería" href="https://scontent-a.xx.fbcdn.net/hphotos-xpa1/t31.0-8/p180x540/10644626_949349891761446_8214198292326515358_o.jpg " style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 30px;
"><img title="Foto 1 de la galería" src="https://scontent-a.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/s130x130/10500587_949349891761446_8214198292326515358_n.jpg ?oh=1df1fe0a94d36a0ebf04103dc00448c7&amp;oe=54E8E2 7E" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 2 de la galería" href="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xfp1/t31.0-8/s720x720/1495374_944433008919801_5133683806552794947_o.png" style="
width: 100px; height: 100px; overflow: hidden; position: absolute; left: 130px;
"><img title="Foto 2 de la galería" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/s130x130/10734182_944433008919801_5133683806552794947_n.png ?oh=bc80989cb9c286c6a65e2c05473118f5&amp;oe=54D870 70&amp;__gda__=1424838295_d24a6b4d12b15ee999288766 968db6c6" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 3 de la galería" href="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/s720x720/10580654_885935888102847_8378483343998195383_o.jpg " style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 230px;
"><img title="Foto 3 de la galería" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/s130x130/10556446_885935888102847_8378483343998195383_n.jpg ?oh=003156b895e5e947665cc4a0ea1ad0cb&amp;oe=54DD29 D4&amp;__gda__=1424226355_797cfb8db277e4015d69aa3f 14c7390b" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 4 de la galería" href="https://scontent-b.xx.fbcdn.net/hphotos-xap1/t31.0-8/s720x720/10329866_855031867859916_4600692834673943451_o.jpg " style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 330px;
"><img title="Foto 4 de la galería" src="https://scontent-b.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/s130x130/10417659_855031867859916_4600692834673943451_n.jpg ?oh=95614d04f59b1e1161d1b7ef92392f55&amp;oe=54F195 69" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 5 de la galería" href="https://scontent-b.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/10295717_822469644449472_7868771215393823827_n.jpg ?oh=c74d7800a76eba998e6701e424b723b0&amp;oe=54E4B3 5F" style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 430px;
"><img title="Foto 5 de la galería" src="https://scontent-b.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/s130x130/10295717_822469644449472_7868771215393823827_n.jpg ?oh=82636b22019df0a1227e66bfff305f09&amp;oe=54EE63 87" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 6 de la galería" href="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpa1/t31.0-8/p180x540/1898353_812426355453801_1178120796_o.jpg" style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 530px;
"><img title="Foto 6 de la galería" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/s130x130/10153243_812426355453801_1178120796_n.jpg?oh=6d523 4061af4d9a5b854b6144b29b5e0&amp;oe=54D8DA90&amp;__ gda__=1424669004_5ecbf83cfef14ed52db6b0afabf44d61" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 7 de la galería" href="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1794820_793186894044414_1347977059_n.jpg?oh=f33aec 749edd8d9fb2dbcfa70b1cb4d3&amp;oe=54E443E7&amp;__g da__=1424918113_42e50b02a3f5d460c91a42eff7febeb4" style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 630px;
"><img title="Foto 7 de la galería" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/s130x130/1794820_793186894044414_1347977059_n.jpg?oh=b89f5b e316446d14020f59cc5edc7381&amp;oe=54D9C44F&amp;__g da__=1425204878_35071f9f1013c54202da0f2e8620d381" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 8 de la galería" href="https://scontent-a.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/1003393_780229918673445_1833459003_n.jpg?oh=4d13c1 589000d34487f72e28f29fa37d&amp;oe=54DF5B59" style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 730px;
"><img title="Foto 8 de la galería" src="https://scontent-a.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/s130x130/1003393_780229918673445_1833459003_n.jpg?oh=3f2099 79017ae8271f675c6149f6fcbb&amp;oe=54D524F1" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>
<a rel="sexylightbox[kmx]" title="Foto 9 de la galería" href="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/p180x540/1536550_765344130162024_663233919_n.jpg?oh=99bcf24 ac4e77555fa5d7aa40eafb0ec&amp;oe=54F4E7BD&amp;__gd a__=1424980543_f0354f33027854e23f40e97b46546c62" style="
width: 100px; height: 100px; overflow: hidden; position: absolute;
left: 830px;
"><img title="Foto 9 de la galería" src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/s130x130/1536550_765344130162024_663233919_n.jpg?oh=9b056f8 a40acee16c155854cabc82ce8&amp;oe=54E882D3&amp;__gd a__=1423583569_5963f78739b389be8383243561d85e63" width="150" height="100" class="bordes" style="
position: relative; left: -25px;
"></a>

[Bier]

Claro que se puede... yo lo hago así:
Leo el jpg y encuentro las dimensiones del gráfico, luego las ajusto al tamaño requerido, respetando las proporciones originales, de esa forma no se distorciona. es la forma en que lo hace fb, tw... y demás

[abelhoyos]

No, no lo he podido hacer, la cosa es que la estructura esta en el js y no domino el tema de js. Si alguien lo podría hacer, les agradecería