您好，我对编写 HTML 和 CSS 比较陌生。我正在使用 Bootstrap 作为框架。我正在尝试显示一个圆形图像，但是图像会显示，但只有图像的一 Angular 而不是图像中间的脸。 我不确定该怎么做，因为我更改了高度和宽度并不能解决问题。
.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> 
最佳答案
我不知道您使用的是哪个版本的 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 »</a></p>
</div>
</div>
</div>
如果你的 Bootstrap 版本没有这个类，只需从另一个 Bootstrap 版本复制它们，
关于html - 只有图像的边缘显示在圆圈上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37684742/