Hola, ya estoy de vuelta!!
En este primer post del 2015 quiero traeros un nuevo Tutorial de Html, para que luego digan que no empezamos el año con ganas. Quiero enseñaros como podéis fijar automáticamente el tamaño de imágenes que subáis a vuestro blog, sin tener que preocuparos de redimensionarlas antes de subirlas.
(*)Pero como todo en la vida este tutorial tiene sus pros y sus contras. Primero os cuento como lo vamos hacer y después las cosas que debéis tener en cuenta antes de aplicarlo ya que considero que no es valido para todos los blogs.
Antes de nada hacemos una copia de seguridad de nuestra plantilla, y entramos en Plantilla => Editar HTML, una vez ahí buscamos:
]]></b:skin>
Y justo encima pegamos este código:
/* Tamaño de Imágenes Automático */
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
Max-width, Es el elemento clave que debemos tener en cuenta a la hora de configurar el ancho que queremos que tengan nuestras imágenes. Si queremos que nuestras imágenes ocupen todo el ancho del espacio del post lo dejaremos a 100%, o si queremos que se configuren a una medida fija como por ejemplo a 600px, sustituiremos el 100% por 600px.
Consideraciones a tener en cuenta antes de automatizar el tamaño de nuestras imágenes.
● Cuando establecemos un ancho fijo para todas las imágenes eso significa que afectara tanto a imágenes Horizontales como a Verticales. Por lo que creo que mas recomendable cuando las imágenes de nuestro blog son horizontales ya que visualmente queda mas bonito.
● También hay que tener en cuenta que si nuestro tamaño fijo es de 600px debemos subir imágenes de un tamaño superior para que se reduzcan al tamaño que hemos fijado. Ya que si subimos imágenes de un tamaño menor que 600px , las imagenes se quedaran con el tamaño original con la que las hemos subido y no se adaptara al tamaño fijado.
● Y por ultimo para que las imágenes tomen la medida automática que previamente hemos fijado debe seleccionar "Tamaño Original".
Muy buena entrada. Yo siempre redimensiono las imágenes y las edito con Photoscape, pero tengo que mirar de pulir esto que dices tu de las imágenes verticales y horizontales porque es cierto que si las verticales las pones con el mismo tamaño, el resultado final no es bonito.
ResponderEliminarGran post.
Un saludo,
Ana_Chal
Interesante. Yo también las edito, puede venir muy bien una vez se tenga todo organizado, así se ahorra tiempo. Gracias :)
ResponderEliminarHola Ruth
ResponderEliminarAcabo de entrar aquí por casualidad por un tweet que he visto
Te has dejado el comentario sin cerrar, y además lo has puesto al revés ;)
Del modo en que está escrito el código no va a funcionar, no hará nada.
La primera línea debería de ser:
/* Tamaño de Imágenes Automático */
Un beso!
Blanca
Es verdad mil gracias Blanca. ;)
EliminarNo termino de entender como se pone el código HTML, busco con ctrl+F el texto que dices pero no me aparece. En cambio, me sale esto: ... y al poner el código e ir a vista previa en una entrada la imagen se me sale del lugar para la entrada. ¿Qué puedo hacer?
ResponderEliminarGracias de antemano.