Como lograr que una imagen tenga el height="auto" widht="auto" y que la imagen sea un circle de 60-60[Resuelta]

Respuestas:

•  

    1  

   

   

  Black Soldier Karma: 2600

   
  Fecha: 02-01-2019 03:34:51 Sin un ejemplo claro de lo que quieres, esta un poco difícil, pero en todo caso, están las media queries css para detectar los cambios en las dimensiones de pantalla y aplicar las clases y cambios en cuestión.
  
  Por otro lado, puedes también utilizar jquery para detectar los cambios y aplicar los mismo en cuestión, te dejo una muestra a ver si es lo que buscas:
  
  Esta es una muestra simple del header de portada de Facebook por ejemplo
  
  

  <div id="contenedor" class="contenedor">
    <div id="muestra" class="banner">
        
    </div>
    <div id="foto" class="imagen anima foto">
  
    </div>
    
  </div>
  

  
  
  El Css:
  

  body{
    background-color:#333322
  }
  .contenedor{
    width:100%; height:220px; position:relative;
  }
  .imagen{
    background-image:url(https://content-static.upwork.com/uploads/2014/10/01073427/profilephoto1.jpg); background-size:cover; background-position:center
  }
  .foto{
    background-color:#252525; width:120px; height:120px;position: absolute; bottom:0px; margin-left:20px
  }
  .foto-round{
    background-color:#252525; width:120px; height:120px;position: absolute; bottom:0px; border-radius:180px; left:0; right:0; margin:auto
  }
  .banner{
    width:100%; height:160px; color:#ffffff; background-color:#000000; position: absolute; background-image:url(https://www.viajejet.com/wp-content/viajes/paisaje-marino-lago-jackson.jpg); background-size:cover; background-position:center
  }
  
  .anima{
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  

  
  
  y un `poco de jquery:
  

  $(function(){
  	$(window).resize(function(){
    	if($("#muestra").width()<=450){
      	$("#foto").removeClass('foto').addClass('foto-round');
      }else{
      	$("#foto").removeClass('foto-round').addClass('foto');
      }
    })
  })
  

  
  
  Aquí una muestra funcionando:
  http://jsfiddle.net/xfxstudios/o5ft2y6c/25/
  
  
  
    Votos: 1 - Link respuesta
   
•  

    0  

   

   

  Txema Artzain Karma: 3097

   
  Fecha: 02-01-2019 06:29:31 Con CSS
  

      <style>
  	.circle {
  	width: 60px;
  	height: 60px;
  	border-radius: 50%;
  	}
      </style>
  <img class="circle" src="ruta_de_imagen.ext" title="Imagen de perfil" alt="Imagen actual">
  

  
  
  Si la imagen no es cuadrada, te la deformará al ancho y alto asignado   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Braylin Payano Karma: 1227

   
  Fecha: 02-01-2019 08:18:56 Gracias muchas por su ayuda, logre el cambio que yo quería agregándolo de esta manera
  

  <b-img :src="image" rounded="circle" title="Imagen de perfil"  width="60" height="auto"
            alt="Imagen actual" class="m-1" />

  
  Le coleque un valor automatico a al alto de la foto y ahora se ajusta muy bien, aunque no es como lo tiene whatsapp y las demás redes sociales, pero me gusta como se ve.
  Si la imagen tiene un cuadra perfecto se vera bien y si es mas alta que ancha, también se vera bien
  
  Gracias por su ayuda Txema, muchas gracias Carlos   Votos: 0 - Link respuesta