Question:
Date: 01-01-2019 09:06:56
(In Spanish)
Estoy desarrollando un proyecto y hay algunas imágenes que se ven muy feas porque tienen mucho ancho etc...
Espero que yo haya explicado bien el problema y lo hayan logrado entender, estoy utilizando código de bootstrap para las imagenes
Como lograr que una imagen tenga el height="auto" widht="auto" y que la imagen sea un circle de 60-60[Resolved]
Hola comunidad, lo que yo quiero lograr es la típica función de todas las redes sociales, que tienen sus ancho y alto en una especie de valor automático pero que la imagen es un border-radiues de unos 60px.Estoy desarrollando un proyecto y hay algunas imágenes que se ven muy feas porque tienen mucho ancho etc...
Espero que yo haya explicado bien el problema y lo hayan logrado entender, estoy utilizando código de bootstrap para las imagenes
<b-img :src="image" rounded="circle" title="Imagen de perfil" width="60" height="60" alt="Imagen actual" class="m-1" />Votes: 1 - Answers: 3 - Views: 15 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
Date: 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/
Votes: 1 - Link answer -
Date: 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 Votes: 0 - Link answer -
Date: 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 Votes: 0 - Link answer
To actively participate in the community first must authenticate, enter the system.Sign In