Question

嗨，我对HTML和CSS编码相对较新。我正在使用bootstrap作为框架。我试图显示圆形图像，但图像显示，但只有图像的角落不是图像中间的脸部。我不知道该怎么做，因为我改变高度和宽度并没有解决问题。

		 .hrCircles {
		 	-webkit-filter: grayscale(100%);
		 	background-image: url('../img/karlie.jpg');
			height: 120px;
			width: 120px;
			display:inline-block;
			margin-left: 20px;
			padding: 0;
			vertical-align:top;
			transition-duration: 1s;

			}
				.hrCircles:hover {
					margin-bottom: 40px;
				 	background-image: url(../img/karlie.jpg);
					height:140px;
					width:140px;

				}

		 .top-buffer{

			padding-top: 200px;
			padding-bottom: 200px;
			}
		 .img-responsive {
			max-width: calc(100%/3);
			display: inline-block;
			}

<!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">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Survival Guide - About</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
		
		<!-- Add some custom css -->
			<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
	<div class="container-fluid">
		<div class="row no-gutter full-height">
			<div class="col-md-6 well-dark-box fill overlap-down">
				<h1 class="text-center text-color-white"><big>About</big></h1>
				<p class="text-center text-color-white text-size-large">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat rutrum mauris, eget venenatis ipsum aliquet a. Vestibulum pulvinar ut dolor quis malesuada. Nulla quis magna sagittis, fermentum lacus vel, sollicitudin mi.  
				</p>
			</div>
			<div class="col-md-6">
				<img src="img/car1.jpg" width="100%" />
			</div>
		</div>
		<div class="row no-gutter full-height">
			
			<div class="col-md-6 overlap">
				<img src="img/car2.jpg" width="100%" />
			</div>
			<div class="col-md-6 well-light-box fill overlap-up">
				<div id="text-shape">
					<img src="img/wheel.png" width="50%" class="curve" />
					<p class="text-color-white text-size-large">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat rutrum mauris, eget venenatis ipsum aliquet a. Vestibulum pulvinar ut dolor quis malesuada. Nulla quis magna sagittis, fermentum lacus vel, sollicitudin mi. Fusce pulvinar arcu est, faucibus suscipit justo venenatis in. Cras eu massa imperdiet, condimentum libero ac, aliquet nisl. 
					</p>
				</div>
			</div>
		</div>
	</div>
	<section id = "fordContacts"> 
	<div class = "top-buffer">
	<h1 class = "text-center contactText"> CONTACT US </h1>
	<h2 class = "contactTextAbout text-center"> So you need to contact someone before you start, 
							                    here's a list of beautiful faces you can contact : </h2>
	<div class = "container" id ="contactCircles">
		<div class="img-circle hrCircles center-block img-responsives"></div>
		<a  class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
		<a  class ="glyphicon glyphicon-envelope hrIcons" href="mailto: hr@ford.com"> </a>
		<div class="img-circle hrCircles center-block img-responsives"></div>
		<a  class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
		<a  class ="glyphicon glyphicon-envelope hrIcons" href="mailto: hr@ford.com"> </a>
		<div class="img-circle hrCircles center-block img-responsives"></div>
		<a  class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
		<a  class ="glyphicon glyphicon-envelope hrIcons" href="mailto: hr@ford.com"> </a>
		<img class="img-circle hrCircles center-block img-responsives" src="img/taylorb&w.jpg">

		
	</div>
	</div>
	</div>
	</div>
	</section>
	</body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

我不知道你使用的是什么版本的Bootstrap，但我使用的是3.3.5，这很好用......

   <div class="container marketing">


    <div class="row">
        <div class="col-lg-4">

            <img class="img-circle" src="Img/cake.jpg" alt="Generic placeholder image" width="140" height="140">
            <h2>Special Cakes</h2>
            <p class="text-justify">Buy now.</p>
            <p><a class="btn btn-default" href="cakes.html" role="button">Go &raquo;</a></p>
        </div>
      </div>
     </div>

如果你的bootstrap版本没有这个类，只需从另一个bootstrap版本复制它们，

仅在圆圈上显示图像的边缘

1 个答案: