Controlar el tamaño máximo y mínimo de las imágenes

En muchas ocasiones me han preguntado cómo se puede redimensionar una imagen, de manera que no se sobresalga de la entrada y por tanto no afecte a la estructura del blog.

A continuación te enseñaré a insertar unos valores de CSS en tu plantilla para controlar el tamaño máximo de las imágenes, así como el mínimo.

Diseño>Edición de HTML>sin expandir artilugios

Busca este bloque de CSS:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Y cámbialo por este otro:

.post img {
max-height: 410px;
min-width: 410px;
padding:4px;
border:1px solid $bordercolor;
}

Si en tu plantilla no aparece el primer bloque, agrega el segundo justo encima de la etiqueta ]]></b:skin>

Hemos agregado al bloque las siguientes líneas:

max-height: 410px; que indica la altura máxima de la imagen.

min-width: 410px; que indica la anchura máxima de la imagen.

El tamaño máximo en este caso sería 410 píxeles, lo cual no resulta demasiado grande pero tampoco pequeño.

Para que resulte más fácil controlar el tamaño, podemos guiarnos por la anchura del bloque de entradas (main-wrapper) que en este caso, es 410.

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Finalmente guarda cambos y tus imágenes tendrán un límite de tamaño.

Notas:

Puede que en tu plantilla no aparezca el bloque de .post img { o, al agregarlo no funcione el truco.

Esto se debe a que el bloque de entradas tiene otro nombre (diferente a post) y por tanto el bloque con las propiedades de las imágenes debe editarse.

Si tienes problemas para realizar el truco, deja tu comentario y podré ayudarte.