3

Tengo una imagen circular la cual deseo hacer responsiva, mi problema es que se mantiene el mismo tamaño. Esto es lo que tengo

.image-cropper {
  width: 215px;
  height: 215px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.img_circular {
  background: #eee;
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
<div class="col s2">
  <a href="#!user">
    <div class="image-cropper">
      <img class="img_circular" src="https://media-cdn.tripadvisor.com/media/photo-s/0d/12/d7/3b/img-20160923-wa0089-largejpg.jpg">
    </div>
  </a>
</div>

les comparto mi jsfiddle

De antemano les agradezco

5
  • 1
    Intenta reemplazando width: auto; por width: 100%; en .img-circular
    – Anthony
    el 20 sep. 2017 a las 5:51
  • no amigo no cambia en nada, gracias por tu aporte
    – Dimoreno
    el 20 sep. 2017 a las 6:38
  • De nada sirve si el contenedor de la imagen tienen un ancho fijo en píxeles.
    – Muriano
    el 20 sep. 2017 a las 6:58
  • Para hacerlas responsiva en el css te tienes que dirigir al link , a la etiqueta <a> la cual tiene propiedades para cuando el raton esta encima del link , si ha sido clickado, etc . Dale un tamaño al contenedor que esta dentro del link , y en la propiedad de la etiqueta <a> le cambias el tamaño : aqui tienes documentacion w3schools.com/css/css_link.asp dende estan las propiedades de la etiqueta de link , la cual tomara diferentes valores segun el raton este encima , clickando , etc el 20 sep. 2017 a las 22:34
  • En lugar de utilizar px para las medidas de la imagen utiliza porcentajes, de esta forma logras escalar la imagen para cualquier tipo de pantalla que la visualice.
    – user13764
    el 20 sep. 2017 a las 22:41

4 respuestas 4

1

Tu imagen no cambia de tamaño, porque tu pones un tamaño fijo en .image-cropper

Pero necesitas ese tamaño fijo, para asegurar que la imagen es cuadrada, antes de hacerla circular. Si no lo haces, la imagen en lugar de ser un circulo, será ovalada (de acuerdo a la proporción de la imagen original).

Lo que se me ocurre, es que hagas la imagen cuadrada usando otras unidades, como vh:

.image-cropper {
  width: 50vh;
  height: 50vh;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

Puedes aprender más de estas unidades en Unidades VH y VW de CSS3

1
  • he implementado tu respuesta pero sigue del mismo tamaño
    – Dimoreno
    el 20 sep. 2017 a las 16:39
1

En .img_circular tienes un width con el valor auto, cambia el auto por 100%

.img_circular{
   ...
   width: 100%;
}
3
  • donde lo debo poner?
    – Dimoreno
    el 20 sep. 2017 a las 5:22
  • 4
    Por favor, indica al usuario dónde tiene que añadir el código proporcionado, desarrolla un poco más tu respuesta.
    – Muriano
    el 20 sep. 2017 a las 6:53
  • Ahi ya lo modifique.. el 20 sep. 2017 a las 17:58
1

Hice algunos cambios en tu código. Mi propuesta es utilizar la imagen como imagen de fondo background-image. De esta manera puedes aplicar background-size:cover;para que la imagen cubra todo el elemento, y si la quieres centrada puedes utilizar background-position: center;. Para estirar la caja utilizo un pseudo elemento ::after donde el padding-bottom: 100%;

.image-cropper {
  display:block;
  width: 50%;
  /*max-width:309px;*/
  position: relative;
  overflow: hidden;
  background-image:url("https://media-cdn.tripadvisor.com/media/photo-s/0d/12/d7/3b/img-20160923-wa0089-largejpg.jpg");
  background-size:cover;
  background-position: center; 

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.image-cropper::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
  <a class="image-cropper" href="#"></a>

Espero que sea lo que necesitas.

-2

Como estas? Yo usaría un max-width=100% y las unidades en rem o em. A mi me han funcionado... sino, con bootstrap4 que vas a renegar mucho menos. Espero te haya ayudado!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.