How to increase the size available for an image so it does not get cut off?

Question

I have tried altering the padding, using object-fit, and toyed around with different image sizes/settings. The image is obviously on there fine, but only way I can fit it is by making it super tiny which will not work for this.

<footer class="footer" id="footer-fixed">
<div class="footer-main">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="widget widget-text">
          <div class="logo logo-footer"><a href="index.html"> <img class="logo logo-display" src="assets/images/logo-footer.png" height=auto width=300 alt=""></a> </div>
          <p>We’re nuts about making your wedding great.</p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="widget widget-text widget-links">
          <h5 class="widget-title">Contact Us</h5>
          <ul>
              <li><i class="mdi mdi-cellphone"></i>(712) 253-3765</li>
            <li> <i class="mdi mdi-email"></i>[email protected]</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Here's the relevant css for it. Didn't want to make a big text dump but it feels like I didn't have enough info in my original post. Most of this is unrelated to the image but I'm so new to coding that some this may be relevant in different ways.

//--Footer CSS--//

/*=============================================
                    Footer
=============================================*/
@media only screen and (min-width: 992px) {
#footer-fixed {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}


.footer{
 font-size:16px;
 }

.footer-main{
 padding:80px 0 60px;
 background-color: #212121;
 position: relative;
    } 

  .footer .widget-title{
   position: relative;
   font-size: 14px;
   line-height: 1.4;
   text-transform: uppercase;
    margin-bottom: 30px;
   color: #fff;
   letter-spacing: 1px;
   font-weight: 700;
   font-family: 'Source Sans Pro', sans-serif;
 }

  .footer .widget-text p {color:#fff;}

  .footer .widget-title:before{
  content:'';
  position: absolute;
  top:100%;
  margin-top: 10px;
  left: 0;
  width: 40px;
  border-top: 1px solid #333;
   }

  .footer .widget-links{
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
 }

  .footer .widget-links li{
   margin-bottom: 14px;
   list-style:none;
  }

 .footer .widget-links li i {
   color:#fff;
   padding-right: 10px;
  }

   .footer .widget-links a{
    color: #fff;
  }

   .footer .widget-links a:hover{
   color:#2196F3;
   text-decoration: none;
  }

   .footer-copyright{
    padding: 30px 0;
    background-color: #111312;
   }

    .copy-right{margin-top:5px;color:#fff;}

    .footer-copyright ul.social-media{
     float:left;
     display:block;
     margin-bottom:0;
     margin-top: 5px;
  }

   .footer-copyright ul.social-media li {
    display:inline-block;
    margin-right: 17px;
   }

  .footer-copyright ul.social-media li:last-child {
    margin-right:0;
  }

  .footer-copyright ul.social-media li a{
  font-size: 20px;
  display: inline-block;
  color: #fff;
  }

 .footer-copyright ul.social-media li a:hover{
   color: #2196F3;
  }




  .flat-footer ul.social-media{
   float:none;
   display:block;
   margin-bottom:0;
   margin-top: 5px;
  }

 .flat-footer ul.social-media li {
   display:inline-block;
   margin-right: 17px;
 }

 .flat-footer ul.social-media li:last-child {
  margin-right:0;
 }

  .flat-footer ul.social-media li a{
   font-size: 20px;
    display: inline-block;
   color: #fff;
   }

   .flat-footer ul.social-media li a:hover{
   color: #2196F3;
 }

   ul.footer-gallery {margin:0;}

   ul.footer-gallery li {
   display: inline-block;
   width: 24%;
   padding: 0 2px 0px 0;
   margin-bottom: 5px;
 }
   ul.footer-gallery li img {
   max-width: 100%;
   width: 100%;
  }

  .footer-gallery-box {
   position: relative;
   overflow: hidden;
   }

   .footer-gallery-box .skin-overlay {
    background-color: rgba(30, 192, 255, 0.9);
    position: absolute;
    width: 100%;
    height: 100%;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease-out;
   -moz-transition: opacity 0.2s ease-out;
   -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
 }
  .footer-gallery-box:hover .skin-overlay{
   opacity: 1;
}
  .footer-gallery-box .zoom-wrap {
   position: absolute;
   top: 0%;
   left: 0;
   width: 100%;
   height: 100%;
 } 

 .footer-gallery-zoom {
  position: absolute;
  left: 0;
  top: 40%;
   width: 100%;
 }

 .footer-gallery-zoom li {
  position: relative;
  bottom: -40px;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
 } 

 .footer-gallery-box:hover .footer-gallery-zoom li{
  bottom: 0;
  opacity: 1;
   visibility: visible;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -o-transition: 0.3s;
    transition: 0.3s;
   }

  .footer-gallery-zoom li a {
  color:#fff;
  }

  .footer-gallery-zoom li a:hover, .footer-gallery-zoom li a:focus {
   color:#212121;
  }

.logo-footer {
  height: 60px;
  width: 300px;
}

.logo-footer img {
 width: 100%;
}
.contact-widget.widget ul li {
 padding-left: 25px;
 position: relative;
}
.contact-widget.widget ul li i {
 position: absolute;
 left: 0;
 top: 1px;
 }

The cut off half fist that's giving me issues

Answer 1

If I understand your problem correctly, then the code you provided doesn't look like it cuts off any part of the image either.

Usually when an image is being cut off it's because the container it's in has this CSS being applied to it:

overflow: hidden;

Nevertheless, here's what I think you're looking for as a solution.

https://jsfiddle.net/nmfqc6dj/