2

Estoy tratando de aumentar el tamaño de los círculos con las imágenes y soy incapaz sin que me rompa otras partes de la pagina. Imagino que sera sencillo. Dejo muestra de lo conseguido hasta ahora. Gracias.

NOTA: EDITO EL CODIGO DE LA PREGUNTA, para ver si pueden ayudarme. Editada con enlaces a bootstrap.

/*style custon*/
   body {
padding-top: 50px;
color: #959595;
}

h1, h2, h3, h4, h5, h6 {
color: black;
}

.feature {
background-color: yellowgreen;
color: greenyellow;
}

.article-intro {
margin-bottom: 25px;
}

.footer-blurb {
padding: 30px 0;
background-color: goldenrod;
color: black;
}

.footer-blurb-item {
padding: 30px;
}
 
.small-print {
background-color: #fff;
padding: 30px 0;
}

.feature,
.page-intro,
.article-intro,
.footer-blurb,
.small-print {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh‌​4u" crossorigin="anonymous">
    <title>Corporate 1a</title>

</head>

<body>
	
	<footer>
		<div class="footer-blurb">
			<div class="container">
				<div class="row">
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i66.tinypic.com/280intx.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p>Probando.</p>
						<p><a class="btn btn-default" href="#">Procrastinate</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i64.tinypic.com/fjes6w.jpg" alt="" width="100" height="100">
						<h3>Prueba</h3>
						<p>Probando </p>
						<p><a class="btn btn-default" href="#">Unleash</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i65.tinypic.com/1044421.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p></p>
						<p><a class="btn btn-default" href="#">OTRA</a></p>
					</div>
				</div>	
			</div>
        </div>  
	</footer>	
</body>

</html>

4
  • 1
    Es bastante dificil de responder viendo solo esa parte de codigo sin que expliques mejor que es lo que se "rompe", para aumentar el tamaño de los circulos tenes que aumentar el tamaño de las imagenes ponele a alguna width y height 200 para probarlo. Commented el 19 dic. 2017 a las 20:00
  • 1
    Miguel a que te refieres con "sin que me rompa otras partes de la pagina" ? Commented el 19 dic. 2017 a las 20:01
  • @Camilo Vazquez, pues que no funciona como me lo puso el compañero Santiago Roldan, ya lo probe yo. Quiza deberia a ver puesto mas codigo, pues hay otros estilos que impiden que la imagen se haga mas pequeña. Quiza deba editar la pregunta...??? Commented el 19 dic. 2017 a las 20:11
  • 1
    Entonces editala lo más completa que puedas y miramos que pasa Commented el 19 dic. 2017 a las 20:15

2 respuestas 2

5

Pues con solo un width y un height se logra hacer mas grande y no veo que se rompa nada.

/*style custon*/
   body {
padding-top: 50px;
color: #959595;
}

h1, h2, h3, h4, h5, h6 {
color: black;
}

.feature {
background-color: yellowgreen;
color: greenyellow;
}

.article-intro {
margin-bottom: 25px;
}

.footer-blurb {
padding: 30px 0;
background-color: goldenrod;
color: black;
}

.footer-blurb-item {
padding: 30px;
}
 
.small-print {
background-color: #fff;
padding: 30px 0;
}

.feature,
.page-intro,
.article-intro,
.footer-blurb,
.small-print {
text-align: center;
}

.img-circle{
  border-radius:50%;
  width:150px;
  height:150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh‌​4u" crossorigin="anonymous">
    <title>Corporate 1a</title>

</head>

<body>
	
	<footer>
		<div class="footer-blurb">
			<div class="container">
				<div class="row">
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i66.tinypic.com/280intx.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p>Probando.</p>
						<p><a class="btn btn-default" href="#">Procrastinate</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i64.tinypic.com/fjes6w.jpg" alt="" width="100" height="100">
						<h3>Prueba</h3>
						<p>Probando </p>
						<p><a class="btn btn-default" href="#">Unleash</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i65.tinypic.com/1044421.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p></p>
						<p><a class="btn btn-default" href="#">OTRA</a></p>
					</div>
				</div>	
			</div>
        </div>  
	</footer>	
</body>

</html>

12
  • 2
    @MiguelEspeso me parece bien ya que si no podemos ver cuando rompe, no te responderemos de manera indicada Commented el 19 dic. 2017 a las 20:14
  • 2
    @MiguelEspeso es solo esa linea amarilla? Commented el 19 dic. 2017 a las 21:19
  • 2
    @MiguelEspeso si las otras linea que no pusiste son insignificantes dejame decirte que a mi me sigue funcionando bien sin dañar nada Commented el 19 dic. 2017 a las 21:25
  • 2
    @MiguelEspeso edite la respuesta poniendole todos los estilos y sigue funcionando igual, fijate que no te falte informarme de algo mas. Commented el 19 dic. 2017 a las 21:41
  • 2
    @MiguelEspeso Listo, me sigue funcionando igualmente, ya edite el codigo Commented el 19 dic. 2017 a las 21:50
0

Puedes Probar con un transform: scale(3); donde se encuentra el numero 3 puedes colocarle la escala que quieras.

        .img-circle {
        border-radius: 50%;
        transform: scale(3);
      }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>Corporate 1a</title>

</head>

<body>
	
	<footer>
		<div class="footer-blurb">
			<div class="container">
				<div class="row">
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i66.tinypic.com/280intx.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p>Probando.</p>
						<p><a class="btn btn-default" href="#">Procrastinate</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i64.tinypic.com/fjes6w.jpg" alt="" width="100" height="100">
						<h3>Prueba</h3>
						<p>Probando </p>
						<p><a class="btn btn-default" href="#">Unleash</a></p>
					</div>
					<div class="col-sm-4 footer-blurb-item">
						<img class="img-circle" src="http://i65.tinypic.com/1044421.jpg" alt="" width="100" height="100">
						<h3>prueba</h3>
						<p></p>
						<p><a class="btn btn-default" href="#">OTRA</a></p>
					</div>
				</div>	
			</div>
        </div>  
	</footer>	
</body>

</html>

2
  • Voy a editar la pregunta para poner mas codigo, gracias Commented el 19 dic. 2017 a las 20:59
  • Tampoco funciona con transform: scale(3); @ijar Commented el 19 dic. 2017 a las 21:25

Tu Respuesta

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

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