Profile Card HTML - html

Question

image image2I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
Any help is greatly appreciated. Thanks!
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">☰</span>
<div class="navbar-header logo">
<a class="logo-media" href="#">Logo</a>
</div>
<div id="mySidenav" class="sidenav">
×
<div class="sidebar-logo">
<a class="logo-a" href="#">Logo</a>
</div>
<span class="sidebar-title">My Account</span>
<span class="glyphicon glyphicon-home p-r-10"></span> Home
<span class="glyphicon glyphicon-road p-r-10"></span> My Booking
<span class="glyphicon glyphicon-envelope p-r-10"></span> Messages
<span class="glyphicon glyphicon-user p-r-10"></span> Account
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Settings</span>
Language
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Information</span>
Customer Service
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login
<span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up!
</div>
<ul class="nav navbar-nav navbar-right no-margin">
<li class="icon"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></li>
<li class="header-right">Login</li>
<li class="header-right">Sign Up</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> 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="daniel.adams#example.com" 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="[phone]" 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>
Personal Information
</li>
<li>Travel
</li>
<li>Security
</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>

Answer 1

Maybe you should consider something like this! :)
.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>