Re: [Ovillo] centra img dentro de a de menos tamaño
Aupa
Gracias a los dos, pero esta solución ya la había probado y no resulta, el
margin-left:-50% no resulta en el 50% del width del img, si no en el 50% del
widht del a con lo que resulta como si ponemos -50px y no se adapta según la
anchura de las diferentes imágenes.
saludos
El 14/07/2011, a las 14:45, Cagatay Gurturk escribió:
debes usar display:block en a. si no, no respecta a los dimensiones. te
dejo el codigo completo:
a href=# style=width: 100px;height: 100px;overflow:hidden;display:
block;
img src=http://ispartakule.biz/haberresim/test1.jpg; alt= style=margin:
-50% /
/a
El 14 de julio de 2011 15:28, David Merino jube...@gmail.com escribió:
Hola Martin
2011/7/14 Martin Etxauri t...@eragin.com:
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de
un a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de
alto y 200 de ancho de manera que la imagen queda recortada dentro del a.
La cuestión es centrar esa imagen dentro del a para que en el recorte se vea
el centro. El verdadero problema es que las imágenes no tendrán todas la
misma proporción y por ende serán de ancho variable, no tendrán todas 200px.
¿alguien conoce alguna solución milagrosa?
los estilos del 'a' tal y como tú los tienes.
img { margin: -50% }
gracias a todos.
saludos
Martin
Un saludo,
David
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Çağatay Gürtürk
itusozluk.com - Kovan Yazılım Reklam Org. Tic. Ltd. Şti.
Emektar Sk. No: 1 D: 6 Gümüşsuyu/İstanbul
+90 530 204 96 03
+90 212 245 85 65
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Aunque no entiendo muy bien lo que quieres hacer. Veamos.
1. Tienes un a de 100px
2. Dentro metes un span de , no se, 200px
3. Dentro del span va una img /
Quiza pueda funcionar:
a { display:block; text.align:center}
span {display:block; margin:0 auto;} y quizas
img {text.align:center;margin:0 auto;} //display block, o quiza inline?
Es jugar un poco con el centrado de elementos y que estos se centren entre
ellos
Saludos
Jaume
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Aunque no entiendo muy bien lo que quieres hacer. Veamos.
1. Tienes un a de 100px
2. Dentro metes un span de , no se, 200px
3. Dentro del span va una img /
Quiza pueda funcionar:
a { display:block; text.align:center}
span {display:block; margin:0 auto;} y quizas
img {text.align:center;margin:0 auto;} //display block, o quiza inline?
Es jugar un poco con el centrado de elementos y que estos se centren entre
ellos
Saludos
Jaume
Hola Jaume
Si entiendo bien lo que me propones esta es la solución A) que daba yo en el
primer mail ¿no? (la pego debajo)
Y efectivamente funciona, de hecho es mi opción actual, pero prefería ahorrarme
el span si es que alguien tenía la solución :)
la pego aquí:
A) Meter el img dentro de un span de mayor tamaño:
a ... spanimg ... //span/a
a{
display:block:
width: 100px;
height: 100px;
overflow:hidden;
...
}
span{
display:block:
height:100px;
width:300px; /*en cualquier caso una medida mayor que cualquiera de las
fotos que entrarán*/
margin-left:-100px;/*o lo que haga falta para que el span quede
centrado en el a según el width del span*/
text-align:center;
}
en vez del margin-left también podemos usar un position:relative; y
left:-100px; que igual es mejor.
pero claro, aquí no me mola que ese span no pinta nada ahí.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Aupa
Efectivamente la propiedad clip no permite el centrado automático, ya que solo
admin medidas en píxeles o ems pero no en porcentaje.
Eso si, me ha parecido interesante el comportamiento de clip con las medidas de
arriba e izquierda, que marcan el punto de origen del clip, puestas en píxeles
y las medida de derecha y abajo, que marcan la altura y anchura del recorte en
em, te da un punto de partida fijo pero un alto y ancho variables según el
tamaño de texto, no se, me da que alguna utilidad curiosa puede tener :)
Y bueno, he estado mirando y no está obsoleta si no que es parte de CSS3, que
también trae background-clip
Saludos y gracias.
El 14/07/2011, a las 14:06, Leonel Silva escribió:
Existe una propiedad clip (o existía) dentro del css qu ete permitía
recortar cosas tal como necesitas (aunque no estoy seguro que permita del
centro hacia afuera) no sé si está deprecada, igual t emando los enlaces
directo al w3c.
http://www.w3.org/wiki/CSS/Properties/clip
http://www.w3.org/TR/CSS2/visufx.html
http://www.google.com/search?q=site:w3.orgq=clipsearch-submit=
2011/7/14 Martin Etxauri t...@eragin.com
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de un
a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de
alto y 200 de ancho de manera que la imagen queda recortada dentro del a.
La cuestión es centrar esa imagen dentro del a para que en el recorte se vea
el centro. El verdadero problema es que las imágenes no tendrán todas la
misma proporción y por ende serán de ancho variable, no tendrán todas 200px.
Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he
encontrado en internet, cla)
A) Meter el img dentro de un span de mayor tamaño:
a ... spanimg ... //span/a
a{
display:block:
width: 100px;
height: 100px;
overflow:hidden;
...
}
span{
display:block:
height:100px;
width:300px; /*en cualquier caso una medida mayor que cualquiera de
las fotos que entrarán*/
margin-left:-100px;/*o lo que haga falta para que el span quede
centrado en el a según el width del span*/
text-align:center;
}
en vez del margin-left también podemos usar un position:relative; y
left:-100px; que igual es mejor.
pero claro, aquí no me mola que ese span no pinta nada ahí.
B) Hacer lo mismo que hacemos con el span con la img y calcular el
margin-left en base a la anchura de la imagen mediante programación.
Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del
trabajo extra de programación le va a costar mas cargar todo, además de que
tendrías que meter el margin-left inline... y bueno, que molaría poder
hacerlo solo con css.
¿alguien conoce alguna solución milagrosa?
gracias a todos.
saludos
Martin
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
--
Caracas - Venezuela
www.leonelsilva.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Efectivamente la propiedad clip no permite el centrado automático, ya que solo admin medidas en píxeles o ems pero no en porcentaje. perdón, donde pone admin debería ser admite, cla, en que estarían mis manos pensando ;) demasiadas veces entrando en paneles de administración en pruebas :P ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Si puedes poner la imagen como background del A podrías centrarla con background-position:center ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Uhm, sip, pero al ser unos thumbnail de una galería no le veo mucho sentido poner todas como fondo ¿no? aparte si las quiero redimensionar necasito tirar de css3 ¿no?, creo. La cuestión es a ver si pillo un método decente para poder utilizarlo siempre, o casi siempre. gracias El 15/07/2011, a las 10:56, cmik22 escribió: Si puedes poner la imagen como background del A podrías centrarla con background-position:center ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] centra img dentro de a de menos tamaño
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de un
a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de alto
y 200 de ancho de manera que la imagen queda recortada dentro del a. La
cuestión es centrar esa imagen dentro del a para que en el recorte se vea el
centro. El verdadero problema es que las imágenes no tendrán todas la misma
proporción y por ende serán de ancho variable, no tendrán todas 200px.
Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he encontrado
en internet, cla)
A) Meter el img dentro de un span de mayor tamaño:
a ... spanimg ... //span/a
a{
display:block:
width: 100px;
height: 100px;
overflow:hidden;
...
}
span{
display:block:
height:100px;
width:300px; /*en cualquier caso una medida mayor que cualquiera de las
fotos que entrarán*/
margin-left:-100px;/*o lo que haga falta para que el span quede
centrado en el a según el width del span*/
text-align:center;
}
en vez del margin-left también podemos usar un position:relative; y
left:-100px; que igual es mejor.
pero claro, aquí no me mola que ese span no pinta nada ahí.
B) Hacer lo mismo que hacemos con el span con la img y calcular el margin-left
en base a la anchura de la imagen mediante programación.
Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del
trabajo extra de programación le va a costar mas cargar todo, además de que
tendrías que meter el margin-left inline... y bueno, que molaría poder hacerlo
solo con css.
¿alguien conoce alguna solución milagrosa?
gracias a todos.
saludos
Martin
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Existe una propiedad clip (o existía) dentro del css qu ete permitía
recortar cosas tal como necesitas (aunque no estoy seguro que permita del
centro hacia afuera) no sé si está deprecada, igual t emando los enlaces
directo al w3c.
http://www.w3.org/wiki/CSS/Properties/clip
http://www.w3.org/TR/CSS2/visufx.html
http://www.google.com/search?q=site:w3.orgq=clipsearch-submit=
2011/7/14 Martin Etxauri t...@eragin.com
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de un
a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de
alto y 200 de ancho de manera que la imagen queda recortada dentro del a.
La cuestión es centrar esa imagen dentro del a para que en el recorte se vea
el centro. El verdadero problema es que las imágenes no tendrán todas la
misma proporción y por ende serán de ancho variable, no tendrán todas 200px.
Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he
encontrado en internet, cla)
A) Meter el img dentro de un span de mayor tamaño:
a ... spanimg ... //span/a
a{
display:block:
width: 100px;
height: 100px;
overflow:hidden;
...
}
span{
display:block:
height:100px;
width:300px; /*en cualquier caso una medida mayor que cualquiera de
las fotos que entrarán*/
margin-left:-100px;/*o lo que haga falta para que el span quede
centrado en el a según el width del span*/
text-align:center;
}
en vez del margin-left también podemos usar un position:relative; y
left:-100px; que igual es mejor.
pero claro, aquí no me mola que ese span no pinta nada ahí.
B) Hacer lo mismo que hacemos con el span con la img y calcular el
margin-left en base a la anchura de la imagen mediante programación.
Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del
trabajo extra de programación le va a costar mas cargar todo, además de que
tendrías que meter el margin-left inline... y bueno, que molaría poder
hacerlo solo con css.
¿alguien conoce alguna solución milagrosa?
gracias a todos.
saludos
Martin
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
--
Caracas - Venezuela
www.leonelsilva.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
Hola Martin
2011/7/14 Martin Etxauri t...@eragin.com:
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de un
a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de
alto y 200 de ancho de manera que la imagen queda recortada dentro del a.
La cuestión es centrar esa imagen dentro del a para que en el recorte se vea
el centro. El verdadero problema es que las imágenes no tendrán todas la
misma proporción y por ende serán de ancho variable, no tendrán todas 200px.
¿alguien conoce alguna solución milagrosa?
los estilos del 'a' tal y como tú los tienes.
img { margin: -50% }
gracias a todos.
saludos
Martin
Un saludo,
David
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] centra img dentro de a de menos tamaño
debes usar display:block en a. si no, no respecta a los dimensiones. te
dejo el codigo completo:
a href=# style=width: 100px;height: 100px;overflow:hidden;display:
block;
img src=http://ispartakule.biz/haberresim/test1.jpg; alt= style=margin:
-50% /
/a
El 14 de julio de 2011 15:28, David Merino jube...@gmail.com escribió:
Hola Martin
2011/7/14 Martin Etxauri t...@eragin.com:
Hola a todos
Vengo a ver si alguien conoce una algo que creo que no existe :)
El tema es para unas miniaturas de una galería, tenemos un img dentro de
un a, digamos que el a tiene 100px de alto y de ancho y la imagen 100 de
alto y 200 de ancho de manera que la imagen queda recortada dentro del a.
La cuestión es centrar esa imagen dentro del a para que en el recorte se vea
el centro. El verdadero problema es que las imágenes no tendrán todas la
misma proporción y por ende serán de ancho variable, no tendrán todas 200px.
¿alguien conoce alguna solución milagrosa?
los estilos del 'a' tal y como tú los tienes.
img { margin: -50% }
gracias a todos.
saludos
Martin
Un saludo,
David
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Çağatay Gürtürk
itusozluk.com - Kovan Yazılım Reklam Org. Tic. Ltd. Şti.
Emektar Sk. No: 1 D: 6 Gümüşsuyu/İstanbul
+90 530 204 96 03
+90 212 245 85 65
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
