Examen

Cambiar tamaño de imagenes.

Lo primero que tenemos que hacer es definir las imagenes que tenemos.

por ejemplo

Imagen pequeña, imagen mediana e imagen grande

img.pequeña{
  width: 50px; height: 50px;
}
img.mediana{
  width: 100px; height: 100px;
}
img.grande{
  width: 200px; height: 200px;
}

Cambiar la posicion de una imagen

Si alguien me puede ayudar tengo una pagina.html con una imagen dentro de un div el div es class="avatar". En el css tengo

.avatar {
    width: 100%;
    margin: 13%;
    width: 65px;
    border-radius: 50px 50% 50% 50%;
    height: 65px;
    background: #448ed3 ;
    position: relative;
    bottom: 50px;
}
.avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30%;
    border:2px solid #fff;
    display: block;
}

Esto me da como resultado que la imagen quede en un circulo, pero el problema es que la imagen se me corta en la parte de abajo. En otras palabras no muestra la imagen entera en la parte de abajo.

¿Cómo puedo hacer para que me muestre la imagen entera o poder mover hacia arriba un poco la imagen dentro del circulo?

Si el tamaño de la imagen es siempre fijo, agrega atributos top y left en tu .avatar img con valores negativos

EDITO

Agrego ejemplo:

.avatar img {
    position: relative;
    top: -15px; /* ajustar los valores para mover la imagen */
    left: -5px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30%;
    border:2px solid #fff;
    display: block;
}

O prueba esto:

Prueba a hacerlo así, te corrijo algunas cosas, aunque seria mejor poner la imagen de fondo, tendrías mas control y mas facil:

.avatar {
margin: 13%;
width: 65px;
border-radius:  50%;
height: 65px;
background: #448ed3 ;
position: relative;
border:2px solid #fff;
bottom: 50px;
overflow:hidden;
}
.avatar img {
width: 100%;
height: auto;
display: block;
}