如何增加图像的可用大小，使其不被切断？

Question

我尝试过改变填充，使用对象适配，并玩弄不同的图像大小/设置。图像显然是在那里很好，但唯一的办法，我可以适应它是通过使它的超级小，这将不起作用。

<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>micdropentertainment515@gmail.com</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;
 }

断掉的半个拳头给我带来了麻烦

Answer 1

如果我正确理解了您的问题，那么您提供的代码看起来也不会切断图像的任何部分。

通常，当图像被切断时，这是因为它所在的容器将这个CSS应用于它：

overflow: hidden;

尽管如此，我认为这是你想要的解决方案。

https://jsfiddle.net/nmfqc6dj/