Cambiar el tamaño de las imágenes proporcionalmente

29 de octubre de 2010 88 comentarios ,
Recuerdo que cuando estudiaba nunca faltaba el que protestaba diciendo que los temas que veíamos en matemáticas no eran trascendentes ya que no nos serían útiles en la vida cotidiana. Bueno, esto no es del todo cierto, y aquí veremos un claro ejemplo de cómo aplicar las matemáticas para solucionar lo que puede resultar un problema con la presentación del blog.

Cuando hemos subido una imagen y deseamos cambiarle el tamaño aplicando las propiedades width y height (ancho y alto respectivamente) podemos correr el riesgo de que la imagen quede desproporcionada y dé una apariencia de deformación.

Esto sucede porque aplicamos un ancho sin saber cuál es la medida proporcional que debe tener el alto de la imagen.

Por lo que, si aplicamos las medidas correctas tendremos una imagen en proporción de medidas, pero sino el resultado puede verse muy mal.

Imagen en proporción
anime


Imagen desproporcionada
anime

Por ejemplo, supongamos que tenemos una imagen de mide 1024px de ancho por 768px de alto y queremos reducir su tamaño. Si quiero que el nuevo ancho de la imagen sea de 500px ¿cuál deberá ser el alto de la imagen?


Si bien podemos gastar una hora atinando las medidas hasta que se ajuste al tamaño más parecido, también podemos solucionarlo de una manera rápida y precisa; y para hacerlo usaremos la tan conocida regla de tres.

Es una ecuación simple en la cual, para conocer la medida  de X deberemos multiplicar A por B y dividirlo entre Y

Ok, ok, ahora en palabras cristianas que todos entendamos. Lo único que haremos será, multiplicar el ancho deseado por el alto original de la imagen. El resultado lo dividimos entre el ancho original de la imagen y el resultado será el alto que estamos buscando.

Siguiendo el ejemplo anterior entonces multiplicamos el ancho deseado que será de 500px por el alto original de la imagen que es de 768px.  Eso nos da 384,000px y lo dividiremos entre el ancho original de la imagen que es de 1024px. El resultado es 375px.

Esto significa que si cambiamos la imagen a 500px de ancho entonces el alto de la imagen deberá ser de 375px de alto para que quede a proporción. Fácil ¿no?
#divImagen img {
width:500px;
height:375px
;
}
Y si por el contrario, quisiéramos saber el ancho de la imagen se sigue el mismo procedimiento pero a la inversa, es decir, multiplicamos el alto deseado por el ancho original. El resultado lo dividimos entre el alto original de la imagen, y lo que obtendremos será el ancho que estamos buscando.

Quizá puede parecer difícil por el miedo natural que les tenemos a las matemáticas, pero es una ecuación que con la práctica será fácil de aprender y nos ayudará a tener imágenes en tamaños precisos.


88 comentarios en:

" Cambiar el tamaño de las imágenes proporcionalmente "

  1. Buena observación esta Potro yo siempre lo que hago es meterla en photoshop y allí la redimensiono y santas pascuas.

    ResponderEliminar
  2. Si solo aplicas un atributo de tamaño (width o height) el otro cambia proporcionalmente, y adiós matemáticas xD

    ResponderEliminar
  3. Todo un genio, no conocia esa faceta de ti :)

    ResponderEliminar
  4. guillemaro, también suelo hacerlo así cuando tengo Ps abierto, pero cuando no prefiero hacerlo con la ecuación para no alentar la computadora.

    SDK, eso sería bueno siempre y cuando todos los navegadores fueran igual y/o todos los contenedores y estilos se comportaran de igual forma, pero como no siempre es así entonces hay ocasiones que es necesario especificar una medida proporcional.

    @rielCastellanos, ni yo :P

    ResponderEliminar
  5. muy bueno, pero no lo hare me da pereza hacer los calculos, jaja

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. prácticamente todo se reduce a:

    1.- la regla de tres (es el caso que nos ocupa)
    2.- una onda sinusoidal

    de un físico y matemático licenciado :D

    ResponderEliminar
  8. Creo que sí.
    De un simple aficionado a Blogger :P

    ResponderEliminar
  9. Muy buena potro
    y que bien que ya hiciste la pagina para facebook de Ciudad Blogger, ahora despues haces la URL más corta cuando tengas 25 fans.

    y yo acabo de abrir el youtube de curiosidades del mundo y la verdad que no se que videos subir

    Nos vemos

    ResponderEliminar
  10. oh genial ahora se como yo lo uso mucho pero siempre hago el calculo al tanteo mi técnica es que si le reste 500px al ancho le restaba 500px al alto jajaja, a veces no se veían mal pero otras si, no se me ocurro usar una simple regla de 3.

    ResponderEliminar
  11. AlexG,ya lo hice, sólo que no quedé muy contento con el nombre pero ya antes había ocupado el nombre para mi cuenta personal :S

    Mo, acá entre nos, cuando no quiero sacar la calculadora también las modifico al tanteo :D

    Javierdealmagro, ni siquiera buen alumno :P

    ResponderEliminar
  12. potro el "matematico" gracias por el tips y es verdad muchas veces odio abris el Ps solo pàra redimencionar una imagen.
    pd: me gusta lo de "inicio" en tu pagina espero un tutorial sobre eso y sobre ese codigo html o fbml.

    ResponderEliminar
  13. Gracias Potro, yo para hacer esto me metía en un editor de imagenes. Me gusta mucho tu blog y no sabes la de veces que me he metido, espero saldar las cuentas contigo con un agradecimiento gigantesco. jajaja Es que llevo poco tiempo ebn esto de los blogs y gracias a gente como tú, me voy soltando.

    ResponderEliminar
  14. Yo uso el paint, abro la imagen en paint y si deseo que una imagen de 500x325 pasarla a 200x130 solo le hago clic derecho - cambiar de tamaño - en la configuración me voy a pixeles en el primer cuadrito y el primer cuadrito que dice Horizontal escribo el ancho que desee y automáticamente en la vertical me arroja la los pixeles verticalmente quedando la imagen proporcionada. :D

    ResponderEliminar
  15. nEjO, claro, en estos días hago uno aunque sea para explicarlo de manera breve.

    Nadie, creo que la mayoría usa editores de imágenes para cambiarlas y está bien, el problema es que luego con las prisas no hay tiempo de abrir programas. Te agradezco tu comentario, es un gusto saber que he contribuido para que vayas creciendo con tu blog.

    Franco Paravecino, suena práctico, pero con mi equipo que se ha vuelto tan lento prefiero seguir con las ecuaciones :P

    ResponderEliminar
  16. Qué tal Potro! Oh quizás deba decir en esta ocasión, Profe Potro (ja, ja!).
    Estuvo bueno este recordatorio sobre la importancia de las Matemáticas. En realidad, la regla de tres la aprendí como en cuarto grado de la escuela primaria (o elemental), y desde entonces, a Dios gracias, no se me ha olvidado y la uso cada vez que me sea necesario en la vida diaria:
    desde medidas de recetas en la cocina, dibujo lineal (a lápiz y papel, a la antiguita), en proporciones de medicamentos según el peso (para mis animalitos cuando han enfermado), en distancias vs tiempo, en medidas de telas, etc. Incluso, hasta en música (al usar "transpose" de acordes, cuando se quiere tocar una canción y cambiarla de un tono a otro); es que la música es, en esencia, también matemática aplicada.
    Bueno, creo que ya me inspiré demasiado por ahora (ja, ja). Saludos a ti y a todos los ciudadanos y gracias por tus siempre atinados consejos!

    ResponderEliminar
  17. Hola MASTER! Te cuento que apliqué tu método de resumen de entradas con imágenes en miniatura y tengo un par de cuestiones para resolver. La primera es que me quedan en la página principal y a la vista el post footer y las entradas vinculadas. La pregunta es ¿como hago para que ambas queden dentro del post, o sea ANTES DEL LEER MÁS?
    Otro problemita que tengo es que cuando quiero usar scriptáculus no me funciona el gadget de seguidores.
    Te agradeceré enormemente que me des una mano con esto.
    (tengo un botón de enlace tuyo en mi blog)
    http://mitecladoyyo-lils.blogspot.com

    ResponderEliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. Potro , el gusto es mío, creo que si no hubiera dado con tu blog el mío se hubiese quedado en proyecto, así poquito a poquito vamos aprendiendo. Tengo guardado hasta tu indice , fíjate si me has ayudadojajajaja. Gracias. Y perdona que he borrado sin querer el comentario.

    ResponderEliminar
  20. Vicky, vaya pues no se me había ocurrido darle tantos usos a las matemáticas pero tienes toda la razón, es aplicable para todo eso y más. Creo que tendrás que hacer un post sobre todo ello :D

    Lils, mira esta entrada para que puedas localizar esos enlaces que deseas ocultar. Luego mira esta otra entrada y encierra los códigos anteriores con la condicional que hará que sólo se muestren en las entradas. Gracias por el enlace :D

    Nadie, no te preocupes por el comentario borrado ;)

    ResponderEliminar
  21. Hola potro, yo pienso hacer un blog solo para mis amigos, pero como le pongo una contraseña al blog para que solo lo vean ellos?

    ResponderEliminar
  22. Muuuuuuuuuuuchas gracias a vos, quedó per-fec-to!

    ResponderEliminar
  23. adrian86924, contraseña no se puede, pero puedes hacer que sólo las personas que tú invites puedan verlo. Para hacerlo ve a Configuración > Permisos, y abajo dice '¿Quién puede ver este blog?', selecciona 'Sólo a los usuarios que yo elija' y agrega los correos de las personas que podrán ver el blog.

    Lils, no hay nada qué agradecer, me da gusto que esté quedando como deseabas :)

    ResponderEliminar
  24. Merci Potro
    Más de una vez me ha pasado y aqui esta la solución clara y sencilla.
    Saludos

    ResponderEliminar
  25. Ésta entrada tuya, por muchas posibilidades que puedan aparecer en los programas, es para enmarcarla, Potro, con marco de oro a ser posible.
    Los avances técnicos no deberían impedir que nuestro cerebro funcionase, o aún peor, que nos invadiera la vagancia y no nos esforzáramos en ponerlo a funcionar, sino todo lo contrario, que es el mal de nuestros días, y tú, permítemelo que te lo exprese así, ERES MI HÉROE.
    MIL GRACIAS
    Y además, me la llevo a mi perfil de facebook con el siguiente título "Pensar no está reñido con la inteligencia", ;).
    Un beso ENORME

    ResponderEliminar
  26. potro no te kiero liar pero tengo un problema con el menú vertical desplegable ya k en un sitio me deja ponerlo y en otro no. te envío las direcciones pa k lo veas.
    http://elrincondemario6.blogspot.com
    http://www.rm6pruebas.blogspot.com
    saludos

    ResponderEliminar
  27. Gildo Kaldorana, más que sencillo y sin necesidad de recurrir a algún programa o al azar.

    Sofía Serra Giráldez, mejor dicho imposible, le dejamos todo a las máquinas y nos olvidamos de la máquina más potente que existe y que todos poseemos. ¡Otro beso enorme para ti!

    mariocrack6, no veo que tengas el último código para mostrar el menú. Verifica que esté todo bien y si continúa el problema deja los detalles en la entrada que corresponde.

    ResponderEliminar
  28. A eso se le llama: Regla de 3 simple. Sirve

    ResponderEliminar
  29. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  30. El comentario anterior ha sido detectado como SPAM y fue eliminado de la entrada.

    ResponderEliminar
  31. Potro: antes que nada, deseaba felicitarte y agradecerte por la gran ayuda que nos das, ahora te cuento que tengo un problema enorme en mi blog, y me gustaria si podes me des una mano, paso a contarte,,, el tema es que tengo en mi blog un gran problema con la resolusion, (y algunos user la ven desproporcionada) a tal punto que llegue a poner uqe para visulaizar bien la pagina deberian aplicarles 1024 x 768, me gustaria que esto no me ocurra,,, bien espero puedas darme una mano te adjunto el nombre de mi blog, si lo consideras spam solo lo borras, no es mi intencion, desde ya te agradesco el tiempo que nos dededicas. Salu2

    http://www.elrinconrmvbdemadryn.blogspot.com/

    PD: Mil Gracias

    ResponderEliminar
  32. Potro, me olvide de comentar, que este problema se da en los monitores wild screams, la verdad lo intente todo, pero bueno, el que no sabe es como que no ve, te dejo mi correo, asi quieres te paso una copìa de la plantilla para que lo analices tranquilo. Gracias un abrazo

    ResponderEliminar
  33. Aca mi correo y una imagen de alguien que lo ve mal, para que te des una idea de lo que digo, disculpa tantos mensajes, en realidad estoy preocupado, por favor espero ayuda. Saludos. Gracias de antemano.
    Marcos, Correo: madryndvd@hotmail.com

    la imagen que menciono: http://s2.subirimagenes.com/otros/previo/thump_5442628dibujo.jpg

    ResponderEliminar
  34. Potro me gustaría cambiar el diseño de los comentarios en mi blog como lo hago?.

    http://cdvillanuevadelarzobispo-javier.blogspot.com/

    ResponderEliminar
  35. Hola Potro, magnífica explicación de como hacer la regla de 3, ya que yo... ni me acordaba, de todas maneras las matemáticas y yo nos esforzamos pero no hay sintonía jejeje, yo también soy vago y recurro a lo fácil lo reconozco, redimensionandola en PhotoScape, pero es de agradecer el que nos refresques a más de uno una regla elemental de las matemáticas, y que siempre estés dispuesto a ayudar y aportar a todo el colectivo blogero, bueno después de este mítin... no he tomado café jajaja, tengo una pregunta fuera del tema Potro, podrías indicarme por favor, un buen hosting de fotos, gratuito y que no te borren las fotos cada 2x3? Muchisimas gracias por todo como siempre, un abrazo

    ResponderEliminar
  36. zaipoc, pues no creo que sea un problema, el ancho de tu blog está especificado en porcentajes y es por eso que es "autoajustable". Podrías especificar estas medidas en pixeles pero no creo que sea necesario.

    Javier, ¿exactamente qué quieres cambiar?

    MaG@S RaDioMuSiC, pues el mismo que usa Blogger es bueno, Picasa; ahí se alojan todas las imágenes que subimos al blog.

    ResponderEliminar
  37. Ñós !! jajaja y yo pensando que picassa tendría mil problemas... muchisimas gracias Potro, grande como siempre

    ResponderEliminar
  38. El fondo sea diferente al del blog, quitar la imagen de blogger y el formulario de comentarios

    ResponderEliminar
  39. Potro: Gracias pòr responder tan pronto hermano,, pero aun sigo con mi duda,,, me das a entender que en realidad se ve bien? por que esta gente hasta me envio una foto...que te adjunte, de como lo ve. Nuevamente gracias

    ResponderEliminar
  40. Javier, mira esta entrada de Oloblogger que habla sobre ese tema justamente: http://oloblogger.blogspot.com/2009/08/blogger-modificar-el-formulario-de.html

    zaipoc, pues yo lo veo perfectamente bien y tengo un monitor de 1280 x 800

    ResponderEliminar
  41. San Potro,,, nada mejor que la opinion de un experto, si tu me lo afirmas asi se queda, mil gracias. Salu2

    ResponderEliminar
  42. De cualquier modo podrías establecer un ancho al #outer-wrapper para evitar que se expanda en los monitores de alta resolución.
    Sólo hay que agregar un ancho similar al del #content-wrapper por ejemplo:

    width: 1020px;

    ResponderEliminar
  43. cuando no el potro jejeje yo tengo un "monitor" 320x240

    ResponderEliminar
  44. Potro si eso es lo mejor lo haré, mi duda es:,, Dónde coloco esto? disculpame que siga molestando. Gracias

    ResponderEliminar
  45. nEjO, saliste con más ventaja porque en mi teléfono no se navega muy bien :P

    zaipoc, justo debajo de #outer-wrapper {

    ResponderEliminar
  46. jajajaja pense que no captarias lo de la pantalla del cel... creo que ahora ya entiewndo lo de tu otra pagina "fondos 240"

    ResponderEliminar
  47. Sí, justo es por eso el nombre; de cualquier forma no me quejo, no uso mucho el teléfono para navegar :P

    ResponderEliminar
  48. Mil Gracias potro, ojala esta sea la solución, en realidad eres grande y valoro muchisimo lo que nos das.Salu2

    ResponderEliminar
  49. Esto del redimensionamiento proporcional de las imágenes es lo que llevo años tratándo de hacerle entender a mis amigos, sobre todo porque les gusta pasar mucho imágenes a sus celulares, pero no lograba hacerles captar bien la idea o cómo lo hicieran para evitar deformaciones en las fotos.

    Aqui tú lo explicaste de manera perfecta Potro, les voy a mandar el link del post. Saludos.

    ResponderEliminar
  50. Gracias LMGuillermo, qué bueno que lo has encontrado útil, espero que tus amigos también lo hallen así :)
    Saludos.

    ResponderEliminar
  51. ¿No seria mas facil poner asi?

    'width:500px; height:auto;'

    ResponderEliminar
  52. Si se trata de una imagen con la etiqueta IMG con sólo poner el width se ajusta automáticamente el alto de la imagen. Pero hay casos en los que es necesario especificar la medida exacta de la imagen, por ejemplo cuando se trata de un script.

    ResponderEliminar
  53. otro una pregunta ya que estas tocando el tema de las imagenes cuando en mi blogger quiero publicar una entrada y inserto una imagen le pongo las medidas que quiero en edicion pero al guardar no me cambia la imagen y sale mas grande de lo que deseo creo que eso es de la plantilla que ha venido asi quiero saber si entrando a edicion html puedo reducir las imagenes de los posts aqui la web www.perumundotv.com

    ResponderEliminar
  54. Entré a tu blog, y en la entrada 'Ver Peru vs México en VIVO - Copa America 2011 gratis' la medida de la foto corresponde a la medida que estipulaste en ella, en este caso es de 120px de ancho y 90px de alto. Así que no veo inconvenientes con ello. ¿Tienes otra entrada donde tengas el problema?

    ResponderEliminar
  55. potro pero cuando redacto la imagen en nueva entrada cuando pongo 120 x 90 en vista previa me sale mas pequeña que en lo que se ve en el posts de la web eso no lo entiendo asi la haga mas pequeña en edicion en la entrada de la web no se achica

    ResponderEliminar
  56. En eso sí no sabría decirte, al menos ya publicado está bien. Desconozco si por ahí Blogger tenga un problema con las imágenes en la Vista Previa.

    ResponderEliminar
  57. hOLA, una pregunta, me gustaria que las imagenes que pongo en el post, antes de leer mas, aparte de que me salgan mas pequeñas, que ya me salen asi, me salgan con la imagen en miniatura pero porporcionada sin distrosion de la misma, solo quiero cambiar eso, me puedes decir como, gracias.

    ResponderEliminar
  58. Hola CGT-València,

    Hay una versión de Leer más que arregla el problema de la distorsión de las miniaturas:
    http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

    ResponderEliminar
  59. muchas gracias potro, ya lo hice y quedo bien.

    Pero me surgio un error nuevo, ahora las imagenes del resumen del post tiene una url erroenea :
    http://www.cgtvalencia.org/undefined

    y clicas en la imagen y vas a ese error y no a la noticia.
    supongo que puse algo mal, o sobra un codigo, si fueras tan amable de poder decirme que codigo esta erroneo te lo agradeceria.
    Si no puedes, otra solucion seria que me dijeras como quitar el enlaze de la imagen del resumen... y se acabo el problema.
    Muchas gracias espero tu respuesta.

    ResponderEliminar
  60. Tienes que cambiar todo el Leer más, no sólo el primer script sino todo, de lo contrario te dará ese error.

    ResponderEliminar
  61. Excelente. Siempre tus consejos son sencillos, muy sencillos, pero enormemente útiles.

    ResponderEliminar
  62. Potro que buen truco nomas quisiera saber como puedo cambiar el formato de los comentarios asi como el tuyo que es diferente si me pudieras decir te lo agradeceria mucho te mando un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Onyss, mira esta entrada de Oloblogger:
      http://www.oloblogger.com/2012/01/insertar-respuestas-replies-blogger-en.html

      Eliminar
  63. Te salio el profe de matematica jajaja Aunque es obvio mucha gente no lo sabe, buen aporte potro, como todos los que hacen en la web. Saludos!

    ResponderEliminar
    Respuestas
    1. Y eso que no me llevo muy bien con las matemáticas :D

      Eliminar
  64. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola TheX, recuerda lo que dice el aviso al final de la página, si tienes material protegido por derechos de autor sólo debes dejar el nombre del blog para que tu comentario no sea eliminado.

      Busca esta parte de la plantilla:

      .post {
      float:left;
      width:179px;
      height: auto;
      font-size:11px;
      margin:15px 0 15px 15px;
      padding:0;
      overflow:hidden;
      box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
      }
      #port {
      width:149px;
      height: 235px;

      margin: 0;
      box-shadow: 0 2px 3px #fff;
      }
      #port:hover {
      width:149px;
      height: 235px;

      margin: 0;
      box-shadow: 0 2px 3px rgba(34, 25, 25, 0.4);
      }

      Los valores en negrita son los que debes modificar.
      Saludos.

      Eliminar
  65. Potro hay alguna manera que pueda modificar los tamaños de blogger para las imagenes. para las chicas, medianas,grande y extragrande. por ejemplo yo en mi blogger siempre pongo el tamaño 480*366 y quisiera que el tamaño grande pusiera esa medida por defecto a las imagenes.

    ResponderEliminar
    Respuestas
    1. Al momento de subirlas no Albeertho, pero una vez que se han subido puedes modificarlas poniéndole dentro del código de la imagen el ancho que quieras, por ejemplo:
      width="600"

      Eliminar
  66. como puedo modificar el tamaño de las fotos que puse con el jquery??
    quiero agrandar el tamaño del contenedor pero no puedo, alguna ayuda?
    no donde tocarle en css para agrandar el tamaño...

    ResponderEliminar
  67. Hola Potro, me sale es de esta forma, hago la ecuacion, la modifico y me sale igual,
    <br />
    <div class="separator" style="clear: both; text-align: center;">
    </div>
    <br />
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-jywr0yXuUnw/UW1h8tvbDhI/AAAAAAAAAms/h1Z3z5M2TDI/s1800/1.1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="363" src="http://1.bp.blogspot.com/-jywr0yXuUnw/UW1h8tvbDhI/AAAAAAAAAms/h1Z3z5M2TDI/s640/1.1.jpg" width="640" /></a></div>

    ResponderEliminar
  68. Hola Potro, por favor necesito de tu ayuda, no se que malo hice y modifique creo que mi plantilla, y no se en donde, ya las imagenes de miniatura no se ve, y se ve todo el articulo completo, como hago para volver a como estaba antes, que se veia, una imagen en miniatura y cuando le dabas clip, se abre el articulo completo, aqui te dejo el enlace.
    http://asusmarcaslistosfuera.blogspot.com/
    otra pregunta: porque no se actualiza el gadget de "quizas tambien le interese"

    ResponderEliminar
    Respuestas
    1. Hola Alam, no sé qué modificaciones hayas hecho, pero sólo tienes que revertir los cambios o en su defecto aplicar nuevamente el truquillo del "leer más" que es el que parece que has quitado.

      Eliminar
    2. lo arregle por ensayo y error, ya esta como es la plantilla original, y el gadget de "Quizas tambien le interese" opte por quitarlo, no se actualizaba y siempre daba los mismos enlances. Respecto al tamaño de las fotos, no logro modicarlas, le coloco los nuevos valores, haciendo la ecuación y sigue apareciendo del mismo tamaño.

      Eliminar
    3. ¿te refieres a las fotos de las entradas? ¿me puedes mostrar una entrada donde hayas modificado los valores?

      Eliminar
  69. Por ejemplo esta la modifique, tenia como valores estos: height="458" y width="640", realice la ecuacion y puse height="500" y puse width="700" y la foto se sigue viendo del mismo tamaño, quiero que se vea mas grande.
    http://asusmarcaslistosfuera.blogspot.com/2013/07/dayron-robles-es-la-principal-estrella.html

    ResponderEliminar
    Respuestas
    1. Gracias por los detalles adicionales. Eso es porque tu plantilla tiene estilos que dicen que las imágenes de las entradas no deben medir más de 515px de ancho. Si quitas ese valor (o si lo modificas) podrás poner un tamaño más grande en las entradas. Si lo quitas también tendrás que quitar el height:auto

      .pagepost img{max-width:515px;padding: 3px;
      border: 1px solid #DDD;
      -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      height:auto;}

      Eliminar
    2. Gracias Potro, solucionado. Otra pregunta como hago para posicionar la imagen en el centro, ya que esta muy al borde de la derecha

      Eliminar
    3. Eso es por los estilos que se incluyen en el código de la imagen, específicamente el margen izquierdo, si lo quitas se eliminará ese espacio que "empuja" la imagen:

      style="margin-left: 1em; margin-right: 1em; text-align: center;"

      Eliminar
  70. Necesito ayuda, se me desconfiguran las imágenes en lightbox, no logro corregir el html. Saludos

    ResponderEliminar
    Respuestas
    1. No veo ningún problema con el Lightbox, el único problema que sí vi es que la imagen de fondo de tu #main-wrapper ha sido eliminada:
      http://1.bp.blogspot.com/_t9JjmICsjcg/SnouMpIuRKI/AAAAAAAABYE/55tXalZUE9E/s1600/photoplus-alpha-bg.png

      Si cambias esa URL por otra, o si eliminas ese background se resolverá el problema.

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger