【发布时间】：2016-10-07 16:09:52
【问题描述】：
您好，我对 HTML 和 CSS 编码比较陌生。我正在使用引导程序作为框架。我试图显示一个圆形图像，但是图像显示，但只有图像的一角，而不是图像中间的脸。 我不知道该怎么做，因为我改变了高度和宽度它并不能解决问题。
.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>【问题讨论】：
标签： html twitter-bootstrap css css-transitions