tag:blogger.com,1999:blog-7470192961806963601.post6417927915703146707..comments2024-03-18T11:10:44.149+01:00Comments on Oloblogger: Recortar el centro de una imagen con CSS: object-fit y otra historiaOlomanhttp://www.blogger.com/profile/11489455592466904176noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-7470192961806963601.post-85785048699557029212017-09-05T04:32:52.375+02:002017-09-05T04:32:52.375+02:00como haria para que fuera compatible con las antig...como haria para que fuera compatible con las antiguas versiones de chrome?Anonymoushttps://www.blogger.com/profile/05896026615285560819noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-26168483287514347172017-02-01T23:48:29.354+01:002017-02-01T23:48:29.354+01:00De nada ;)De nada ;)Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-84636456471877880302017-01-26T17:39:34.045+01:002017-01-26T17:39:34.045+01:00Perfecto, lo que estaba buscando.
Mil gracias Perfecto, lo que estaba buscando.<br /><br />Mil gracias Anonymoushttps://www.blogger.com/profile/11503405585334299795noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-64936483488513931792017-01-16T21:16:12.194+01:002017-01-16T21:16:12.194+01:00Did you say this literally? Then I'm very glad...Did you say this literally? Then I'm very glad for you XDOlomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-45345940428778638962017-01-16T14:57:44.581+01:002017-01-16T14:57:44.581+01:00Thanks so much Oloman!!!! You saved my life :DThanks so much Oloman!!!! You saved my life :DFredhyhttps://www.blogger.com/profile/06177111332364636929noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-39271300516363771222016-07-03T19:52:33.017+02:002016-07-03T19:52:33.017+02:00Planet, eso que viste es la manera de crear un rec...Planet, eso que viste es la manera de crear un recorte en imágenes. Sólo tendrías que subirlas a una entrada y aplicar este código.<br /><br />Si quieres otra cosa más sencilla, prueba con <a href="http://www.oloblogger.com/2014/07/galeria-de-imagenes-sencilla-blogger.html" rel="nofollow">esto</a>.Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-56123413016701555862016-06-30T09:34:27.812+02:002016-06-30T09:34:27.812+02:00Necesito algo como esto https://2.bp.blogspot.com/...Necesito algo como esto https://2.bp.blogspot.com/-dlFCDPzp06k/V3Bbrha6LzI/AAAAAAABXgE/ezioSvkHVVIRMhVraY6M9GOeuBUUmOltgCLcB/s1600/1.png AyudaaaAnonymoushttps://www.blogger.com/profile/07230880435484198476noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-67910927723764859332016-06-30T09:32:38.432+02:002016-06-30T09:32:38.432+02:00No pude crear esa especie de cuadrícula/galería co...No pude crear esa especie de cuadrícula/galería con imágenes en miniatura, ¿alguien puede ayudarme?Anonymoushttps://www.blogger.com/profile/07230880435484198476noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-21695762364050728952016-03-09T00:59:00.325+01:002016-03-09T00:59:00.325+01:00Muchas gracias, excelente aporteMuchas gracias, excelente aporteDeliMolehttps://www.blogger.com/profile/04438071492727858775noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-47038905573566993122015-05-16T16:04:43.852+02:002015-05-16T16:04:43.852+02:00No tiene nada que ver con Blogger. Las propiedades...No tiene nada que ver con Blogger. Las propiedades de CSS son válidas para cualquier plataforma.<br /><br />Lo que si puede ser es que por la estructura de tu página, falte o sobre por ejemplo algún POSITION o que algún ancho de caja no esté definido en el mismo sitio que en mi demo.<br /><br />He visto que en tu página, con width:auto; sí que se produce el recorte correctamente, pero sobre una imagen más grande de lo que lo haría con el 100%.<br /><br />Intuyo (no lo he comprobado) que también podría ser por la proporción de las imágenes que usas, que son cuadradas o casi más altas que anchas, mientras que tu recorte es claramente rectangular apaisado. Puede que en ese caso convenga lo que dices. Bueno, que convenga no, que es LO CORRECTO para el fin que persigues.<br /><br />Gracias de nuevo a tí por los apuntes Jaume.Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-30021141257843478962015-05-15T22:08:20.763+02:002015-05-15T22:08:20.763+02:00Hola de nuevo Oloman.
Llevo un buen rato pegandome...Hola de nuevo Oloman.<br />Llevo un buen rato pegandome con este código y al fin lo he podido hacer funcionar. Lo comento por si a alguien mas le pasa.<br />Estoy diseñando un blog para ina página que tengo hecha y en el listado de artículos muestro una introducción al artículo y una imágen que la ajustaba con el "object-fit: cover;" y quedaba genial porque fuera cual fuera el tamaño de la imagen se ajustaba sobrepasando los límites del contenedor y al entrar a leer la notícia la muestro ya con su tamaño... Quedaba genial con Chrome y Firefox claro porque al empezar a probar con Explorer las imagenes en la introducción pues se veían con el aspect ratio mal.<br />Entonces me he puesto a aplicar la segunda solución que das. La de aplicar la clase ".crop" pero tal y como la has puesto no he conseguido que funcionara.<br />He tenido que modificar el width así:<br /><br /><i>.crop img {<br />position: absolute;<br />top: -100%;<br />bottom: -100%;<br />left: -100%;<br />right: -100%;<br />margin: auto; <br />height: auto;<br /><b>width: auto;</b><br />}</i><br /><br /><i>.crop img {<br />position: absolute;<br />top: -100%;<br />bottom: -100%;<br />left: -100%;<br />right: -100%;<br />margin: auto; <br />height: auto;<br /><b>width: 100%;</b><br />}</i><br /><br />Con esto ya me ha funcionado muy bien.<br /><br />Tengo que decir que no uso blogger sino que lo estoy aplicando a un diseño mio. No se si tendrá algo que ver pero ahí dejo el dato.<br /><br />Gracias por el código tan útil :)<br /><br />Os dejo el enlace por si queréis ver el resultado: <a href="http://angloiberianlanguages.com/blog.php" rel="nofollow">http://angloiberianlanguages.com/blog.php</a><br />Si os da por mirar el código la clase ".crop" lo he pasado por a través de la id "#title-image".<br /><br />Jaumehttps://www.blogger.com/profile/13423884682574820735noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-67360080444023760892015-05-15T20:41:34.631+02:002015-05-15T20:41:34.631+02:00OK. Corregido. Gracias ;)OK. Corregido. Gracias ;)Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-15382982434483649132015-05-15T20:11:20.137+02:002015-05-15T20:11:20.137+02:00Fíjate que tienes un error en el código del post: ...Fíjate que tienes un error en el código del post: <br /><br /><i>.crop {<br />...<br /><b>width: 280px;< height: 280px;</b><br />...</i><br /><br />;)Jaumehttps://www.blogger.com/profile/13423884682574820735noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-4252244512420125662015-04-27T00:27:50.296+02:002015-04-27T00:27:50.296+02:00No sé exactamente qué quieres hacer Adriana, porqu...No sé exactamente qué quieres hacer Adriana, porque el enlace que me pusiste lo que hace es despistarme más. ¿Eso sería para la página de portada a modo de sumarios sólo con imágenes o realmente quieres un índice par una página estática pero en lugar de con los títulos de las entradas con una imagen?Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-48528692362184399212015-04-24T05:29:22.922+02:002015-04-24T05:29:22.922+02:00disculpa que ponga esto en este tema, tal vez me p...disculpa que ponga esto en este tema, tal vez me puedas ayudar, quiero poner un indice o lista con imágenes de las entradas publicadas en mi blog te explico, ( en una pagina de mi blog poner el indice pero en ves de poner el nombre de la entrada o publicacion poner una imagen y al darle clic a la imagen te envie a la publicacion y asi seguir poniendo una imagen para cada publicacion ) aqui te dejo el link de un blog para que me entiendas mejor:<br />dsants-subs.netAdrianahttps://www.blogger.com/profile/12251023047260602190noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-38182441467431174912015-04-23T00:05:41.093+02:002015-04-23T00:05:41.093+02:00Simplemente usando imágenes algo más grandes en la...Simplemente usando imágenes algo más grandes en las entradas, pues de ahí se toman para la portada. Que sean de al menos 210x210pxOlomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-8923369957985605212015-04-21T17:01:47.957+02:002015-04-21T17:01:47.957+02:00Hola Oloman,
En la portada del blog http://panama...Hola Oloman,<br /><br />En la portada del blog http://panama2015.celadel.org, las fotos aparecen deformadas. ¿Cómo puedo solucionar el problema?. graciasel Editorhttps://www.blogger.com/profile/06657293280298009997noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-57723552599985112212015-04-19T23:07:33.833+02:002015-04-19T23:07:33.833+02:00Te recomiendo que pruebes el truco del final, pues...Te recomiendo que pruebes el truco del final, pues así te evitarás tener que meter las imágenes como fondo y las podrás usar con normalidad, dentro de la etiqueta IMG ;)Olomanhttps://www.blogger.com/profile/01957235221463243588noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-83765824386095774852015-04-17T23:11:33.814+02:002015-04-17T23:11:33.814+02:00Un quebradero de cabeza...sí que lo es. Yo he prob...Un quebradero de cabeza...sí que lo es. Yo he probado un montón de formas desde el navegador y me quedo con background-size:cover ...y aseguras soporte desde IE9.<br /><br />Saludos Oloman!Karla Castañedahttps://www.blogger.com/profile/04752799945176272198noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-19616061601865622562015-04-15T23:27:35.741+02:002015-04-15T23:27:35.741+02:00Como siempre buenos datos, un saludoComo siempre buenos datos, un saludoAndres Giraldohttps://www.blogger.com/profile/16679835045648969850noreply@blogger.comtag:blogger.com,1999:blog-7470192961806963601.post-83470779052589506032015-04-15T20:05:56.713+02:002015-04-15T20:05:56.713+02:00Muy útil tu artículo. Este se va a los marcadores ...Muy útil tu artículo. Este se va a los marcadores de cabeza :)<br />Gracias!Jaumehttps://www.blogger.com/profile/13423884682574820735noreply@blogger.com