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;
}