0
안녕하세요 저는 HTML과 CSS를 코딩하는 데 상대적으로 새로운 편입니다. 프레임 워크로 부트 스트랩을 사용하고 있습니다. 그러나 이미지의 가운데에있는 얼굴이 아닌 이미지의 모서리 만 이미지를 표시하지만 원 이미지를 표시하려고합니다. 높이와 너비를 변경하면 문제가 해결되지 않기 때문에이 작업을 수행하는 방법을 잘 모르겠습니다. 난 당신이 사용하는 부트 스트랩의 버전을 알고 있지만 임 3.3.5을 사용하여이 잘 작동하지 말아원의 이미지 가장자리 만 표시됩니다.
\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>
안녕하세요, 저는 부트 스트랩 파일을 검사했는데 모두 괜찮습니다. 3.3.5도 사용하고 있습니다. –
글쎄, 내 의견에서 수업을 사용하면 더 이상 CSS가 필요하지 않습니다. 부트 스트랩 스타일을 사용하면 이미지를 갖게 될 것입니다. 반응 형 서클에서 그리고 당신이 원한다면. –
div 태그를 사용해야하는 CSS 3 애니메이션을 사용하고 있으므로 IMG 태그를 사용할 수 없습니다. –