image image2我正在尝试在Bootstrap 3中构建个人资料卡,但无法使图像适合该卡。我认为,如果我在CSS中链接到图片,则可以更轻松地完成此操作,但是我有很多个人资料卡片,可以在所有情况下使用,因此我认为在这种情况下将图片链接保留在HTML中会更好。

这是我想要的方式:

任何帮助是极大的赞赏。谢谢!



body {
     font-family: 'Poppins';
     overflow: hidden;
}
 .navbar-inverse {
     background-color: #fff !important;
     border-color: #ffffff !important;
     border-bottom: 1px solid #979797 !important;
}
 @media (min-width: 768px){
     .navbar {
         border-radius: 0px !important;
    }
}
 .color-1{
     color: #FCB900;
}
 .sidebar{
     color: #FCB900;
     font-size: 21px;
     float: left;
     padding: 10px 5px;
     cursor: pointer;
     margin: 0 10px;
}
 .logo a{
     color: #424242 !important;
}
 .logo{
     background: white;
     margin: 10px;
     border: 1px solid #979797;
     padding: 5px 20px;
     font-size: 14px;
     font-weight: 600;
}
 .logo-a{
     padding: 0 !important;
     font-size: 13px !important;
}
/* Sidebar CSS */
 .sidebar-logo{
     background: white;
     margin: 10px;
     border: 1px solid #979797;
     padding: 10px 20px;
     font-size: 14px;
     width: 50%;
     margin-left: 10%;
     text-align: center;
     font-weight: 600;
}
 .sidebar-title{
     margin-left: 10%;
     font-size: 12px;
}
 .sidenav {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     background-color: #fcb900;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
}
 .sidenav a {
     padding: 12px 8px 10px 25px;
     text-decoration: none;
     font-size: 14px;
     color: #101010;
     display: block;
     transition: 0.3s;
}
 .sidenav a:hover {
     color: #101010;
}
 .sidenav .closebtn {
     position: absolute;
     top: 0;
     right: 15px;
     font-size: 25px;
     margin-left: 50px;
}
 .cart-icon{
     font-size: 16px;
}

/*------------------------Profile Account----------------------------*/
.widget-author {
  margin-bottom: 58px;
}
.author-card {
  position: relative;
  padding-bottom: 48px;
  background-color: #fff;
  box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}
.author-card .author-card-cover {
  position: relative;
  width: 100%;
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.author-card .author-card-cover::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0.5;
}
.author-card .author-card-cover > .btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0 10px;
}
.author-card .author-card-profile {
  display: table;
  position: relative;
  margin-top: -85px;
  padding-right: 15px;
  padding-bottom: 16px;
  padding-left: 20px;
  z-index: 5;
}
.author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
  display: table-cell;
  vertical-align: middle;
}
.author-card .author-card-profile .author-card-avatar {
  width: 85px;
  border-radius: 50%;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
}
.author-card .author-card-profile .author-card-avatar > img {
  display: block;
  width: 100%;
}
.author-card .author-card-profile .author-card-details {
  padding-top: 50px;
  padding-left: 15px;
}
.author-card .author-card-profile .author-card-name {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: bold;
}
.author-card .author-card-profile .author-card-position {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  font-weight: 600;
}
.author-card .author-card-info {
  margin-bottom: 0;
  padding: 0 25px;
  font-size: 13px;
}
.author-card .author-card-social-bar-wrap {
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
}
.author-card .author-card-social-bar-wrap .author-card-social-bar {
  display: table;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
}
.btn-style-1.btn-white {
    background-color: #fff;
}
.list-group-item i {
    display: inline-block;
    margin-top: -1px;
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}
.mr-1, .mx-1 {
    margin-right: .25rem !important;
}

.list-group-item.active:not(.disabled) {
    border-color: #e7e7e7;
    background: #fff;
    color: #ac32e4;
    cursor: default;
    pointer-events: none;
}
.list-group-flush:last-child .list-group-item:last-child {
    border-bottom: 0;
}

.list-group-flush .list-group-item {
    border-right: 0 !important;
    border-left: 0 !important;
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
a.list-group-item, .list-group-item-action {
    color: #404040;
    font-weight: 600;
}
.list-group-item {
    padding-top: 16px;
    padding-bottom: 16px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 1px solid #e7e7e7 !important;
    border-radius: 0 !important;
    color: #404040;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.125);
}
.list-group-item.active:not(.disabled)::before {
    background-color: #ac32e4;
}

.list-group-item::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: transparent;
    content: '';
}
 @media screen and (max-height: 450px) {
     .sidenav {
        padding-top: 15px;
    }
     .sidenav a {
        font-size: 15px;
    }
}


#exTab1 .tab-content {
  color : #FCB900;
  background-color: #fff;
  padding : 5px 15px;
}

#exTab2 h3 {
  color : #FCB900;
  background-color: #428bca;
  padding : 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills > li > a {
  border-radius: 4px 4px 0 0 ;
}

#exTab3 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}


/* Sidebar CSS */
 .navbar-inverse .navbar-nav>li>a:hover {
     color: #333;
}
 .banner{
     background-image: url('img/banner.jpg');
     background-position: center center;
     background-size: 100%;
     margin: 0;
     width: 100%;
     height: 250px;
}


 @media (min-width: 320px) and (max-width: 600px) {
     .logo{
         border: 1px solid #fff;
    }
     .head{
         border-bottom: 0px solid #fff !important;

    }
     .header-right{
         display: none !important;
    }

    .logo-media{
    background: white;
    border: 1px solid #979797;
    padding: 5px 20px;
    font-size: 14px;
    width: 50%;
    text-align: center;
    font-weight: 600;
    }

    .no-margin{
     margin-top: 0px !important;
     margin-bottom: 0px;
}


  .icon{
    position: absolute !important;
    top: 11px;
    right: 0px;
  }


}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Travelling | Account Settings </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
    <nav class="navbar navbar-inverse head">
        <div class="container-fluid">
            <span style="" onclick="openNav()" class="sidebar">&#9776;</span>
            <div class="navbar-header logo">
                <a class="logo-media" href="#">Logo</a>
            </div>

            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <div class="sidebar-logo">
                    <a class="logo-a" href="#">Logo</a>
                </div>
                <span class="sidebar-title">My Account</span>
                <a href="#"><span class="glyphicon glyphicon-home p-r-10"></span> Home </a>
                <a href="#"><span class="glyphicon glyphicon-road p-r-10"></span> My Booking </a>
                <a href="#"><span class="glyphicon glyphicon-envelope p-r-10"></span> Messages </a>
                <a href="#"><span class="glyphicon glyphicon-user p-r-10"></span> Account </a>

                <hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">

                <span class="sidebar-title">Settings</span>
                <a href="#"> Language </a>
                <hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">

                <span class="sidebar-title">Information</span>
                <a href="#"> Customer Service </a>
                <hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">

                <a href="login.html"> <span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login </a>
                <a href="signup.html"> <span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up! </a>
            </div>
            <ul class="nav navbar-nav navbar-right no-margin">
                <li class="icon"><a href="#"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></a></li>
                <li class="header-right"><a href="login.html">Login</a></li>
                <li class="header-right"><a href="signup.html">Sign Up</a></li>
            </ul>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row">
            <div class="col-lg-4 pb-5">
                <!-- Account Sidebar-->
                <div class="author-card pb-3">
                    <div class="author-card-cover">
                        <!-- <a class="btn btn-style-1 btn-white btn-sm" href="#" data-toggle="tooltip" title="" data-original-title="You currently have 290 Reward points to spend"><i class="fa fa-award text-md"></i>&nbsp;290 points</a> --></div>
                    <div class="author-card-profile">
                        <div class="author-card-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
                        </div>
                        <div class="author-card-details">
                            <h5 class="author-card-name text-lg">Daniel Adams</h5><span class="author-card-position">Joined February 06, 2017</span>
                        </div>
                    </div>
                </div>
                <div class="wizard">
                    <nav class="list-group list-group-flush">
                        <a class="list-group-item" href="#">
                            <div class="d-flex justify-content-between align-items-center">
                                <div><i class="fe-icon-heart mr-1 text-muted"></i>
                                    <div class="d-inline-block font-weight-medium text-uppercase">Account Setting</div>
                                </div>
                            </div>
                        </a>

                        <a class="list-group-item" href="#">
                            <div class="d-flex justify-content-between align-items-center">
                                <div><i class="fe-icon-heart mr-1 text-muted"></i>
                                    <div class="d-inline-block font-weight-medium text-uppercase">My Booking</div>
                                </div>
                            </div>
                        </a>
                        <a class="list-group-item" href="#">
                            <div class="d-flex justify-content-between align-items-center">
                                <div><i class="fe-icon-tag mr-1 text-muted"></i>
                                    <div class="d-inline-block font-weight-medium text-uppercase">Wish List</div>
                                </div>
                            </div>
                        </a>
                    </nav>
                </div>
            </div>
            <!-- Profile Settings-->
            <div class="col-lg-8 pb-5">
                <!-- <form class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-fn">First Name</label>
                        <input class="form-control" type="text" id="account-fn" value="Daniel" required="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-ln">Last Name</label>
                        <input class="form-control" type="text" id="account-ln" value="Adams" required="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-email">E-mail Address</label>
                        <input class="form-control" type="email" id="account-email" value="[email protected]" disabled="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-phone">Phone Number</label>
                        <input class="form-control" type="text" id="account-phone" value="+7 (805) 348 95 72" required="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-pass">New Password</label>
                        <input class="form-control" type="password" id="account-pass">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="account-confirm-pass">Confirm Password</label>
                        <input class="form-control" type="password" id="account-confirm-pass">
                    </div>
                </div>
                <div class="col-12">
                    <hr class="mt-2 mb-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                        <div class="custom-control custom-checkbox d-block">
                            <input class="custom-control-input" type="checkbox" id="subscribe_me" checked="">
                            <label class="custom-control-label" for="subscribe_me">Subscribe me to Newsletter</label>
                        </div>
                        <button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
                    </div>
                </div>
            </form> -->

                <h1>Account Settings  </h1>
                <div id="exTab1">
                    <ul class="nav nav-pills">
                        <li>
                            <a href="#1a" data-toggle="tab">Personal Information</a>
                        </li>
                        <li><a href="#2a" data-toggle="tab">Travel</a>
                        </li>
                        <li><a href="#3a" data-toggle="tab">Security</a>
                        </li>
                    </ul>

                    <div class="tab-content clearfix">
                        <div class="tab-pane" id="1a">
                            <form class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="First Name">First Name*</label>
                                        <input class="form-control" type="text" id="account-fn" placeholder="First Name" required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="Last Name">Last Name*</label>
                                        <input class="form-control" type="text" id="account-ln" placeholder="Last Name"  required="">
                                    </div>
                                </div>
                                 <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="gender">Gender</label>
                                        <select class="form-control" id="sel1" placeholder="Gender">
                                        <option>Male</option>
                                        <option>Female</option>
                                      </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="First Name">First Name*</label>
                                        <input class="form-control" type="text" id="account-fn" placeholder="First Name*"  required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="Last Name">Last Name*</label>
                                        <input class="form-control" type="text" id="account-ln" placeholder="Last Name*" required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="Passport No.">Passport No.</label>
                                        <input class="form-control" type="password" id="account-pass">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="Date of Birth">Date of Birth</label>
                                        <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
                                    </div>
                                </div>

                                  <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="Country">Country</label>
                                        <select class="selectpicker countrypicker form-control" data-flag="true" ></select>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr class="mt-2 mb-3">
                                    <div class="d-flex flex-wrap justify-content-between align-items-center">

                                        <button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="2a">
                            <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
                        </div>
                        <div class="tab-pane" id="3a">

                            <h4> Change Password </h4>
                            <form>
                                <div class="form-group">
                                    <label for="email" style="color:#2EC4B6">Current Password *</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Current Password">
                                </div>
                                <div class="form-group">
                                    <label for="email" style="color:#2EC4B6">New Password *</label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

                                </div>

                                <div class="form-group">
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
                                </div>
                                <button type="submit" class="btn" style="background: #FCB900; color:#fff;">Submit</button>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
    </script>

    <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
</body>

</html>

最佳答案

也许您应该考虑这样的事情! :)



.author-card-shape {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  overflow: hidden;
}
.author-card-img {
  max-width: 100%;
  height: auto;
}

 <figure class="author-card-shape">
 <img class="author-card-img" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</figure>

10-07 13:05