0
嗨，我相对较新的编码HTML和CSS。我使用bootstrap作为框架。我试图显示一个圆形图像，但图像显示，但只有图像的角落，而不是在图像中间的脸部。 我不知道如何做到这一点，因为我改变了它的高度和宽度并不能解决问题。只有图像的边缘正在显示在圆上
\t \t .hrCircles {
\t \t \t -webkit-filter: grayscale(100%);
\t \t \t background-image: url('../img/karlie.jpg');
\t \t \t height: 120px;
\t \t \t width: 120px;
\t \t \t display:inline-block;
\t \t \t margin-left: 20px;
\t \t \t padding: 0;
\t \t \t vertical-align:top;
\t \t \t transition-duration: 1s;
\t \t \t }
\t \t \t \t .hrCircles:hover {
\t \t \t \t \t margin-bottom: 40px;
\t \t \t \t \t background-image: url(../img/karlie.jpg);
\t \t \t \t \t height:140px;
\t \t \t \t \t width:140px;
\t \t \t \t }
\t \t .top-buffer{
\t \t \t padding-top: 200px;
\t \t \t padding-bottom: 200px;
\t \t \t }
\t \t .img-responsive {
\t \t \t max-width: calc(100%/3);
\t \t \t display: inline-block;
\t \t \t }<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
\t \t <title>Survival Guide - About</title>
\t \t <!-- Bootstrap -->
\t \t <link href="css/bootstrap.min.css" rel="stylesheet">
\t \t <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
\t \t <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
\t \t <!--[if lt IE 9]>
\t \t <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
\t \t <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\t \t <![endif]-->
\t \t
\t \t <!-- Add some custom css -->
\t \t \t <link rel="stylesheet" type="text/css" href="css/main.css">
\t </head>
\t <body>
\t <div class="container-fluid">
\t \t <div class="row no-gutter full-height">
\t \t \t <div class="col-md-6 well-dark-box fill overlap-down">
\t \t \t \t <h1 class="text-center text-color-white"><big>About</big></h1>
\t \t \t \t <p class="text-center text-color-white text-size-large">
\t \t \t \t \t 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.
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div class="col-md-6">
\t \t \t \t <img src="img/car1.jpg" width="100%" />
\t \t \t </div>
\t \t </div>
\t \t <div class="row no-gutter full-height">
\t \t \t
\t \t \t <div class="col-md-6 overlap">
\t \t \t \t <img src="img/car2.jpg" width="100%" />
\t \t \t </div>
\t \t \t <div class="col-md-6 well-light-box fill overlap-up">
\t \t \t \t <div id="text-shape">
\t \t \t \t \t <img src="img/wheel.png" width="50%" class="curve" />
\t \t \t \t \t <p class="text-color-white text-size-large">
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <section id = "fordContacts">
\t <div class = "top-buffer">
\t <h1 class = "text-center contactText"> CONTACT US </h1>
\t <h2 class = "contactTextAbout text-center"> So you need to contact someone before you start,
\t \t \t \t \t \t \t here's a list of beautiful faces you can contact : </h2>
\t <div class = "container" id ="contactCircles">
\t \t <div class="img-circle hrCircles center-block img-responsives"></div>
\t \t <a class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
\t \t <a class ="glyphicon glyphicon-envelope hrIcons" href="mailto: [email protected]"> </a>
\t \t <div class="img-circle hrCircles center-block img-responsives"></div>
\t \t <a class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
\t \t <a class ="glyphicon glyphicon-envelope hrIcons" href="mailto: [email protected]"> </a>
\t \t <div class="img-circle hrCircles center-block img-responsives"></div>
\t \t <a class ="glyphicon glyphicon-earphone hrIcons" href="tel: +4401268406121"> </a>
\t \t <a class ="glyphicon glyphicon-envelope hrIcons" href="mailto: [email protected]"> </a>
\t \t <img class="img-circle hrCircles center-block img-responsives" src="img/taylorb&w.jpg">
\t \t
\t </div>
\t </div>
\t </div>
\t </div>
\t </section>
\t </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以及 –
那么使用我的评论中的类，你不需要更多的CSS与引导样式你将有你的图像在响应式的圈子和喜欢你想要的。 –
我无法使用IMG标签，因为我使用的CSS 3动画需要我使用div标签 –