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

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>[phone]</li>
<li> <i class="mdi mdi-email"></i>[e-mail]</li>
</ul>
</div>
</div>
</div>
</div>
</div>

这是它的相关css。我不想做一个大的文本转储，但感觉我在原始帖子中没有足够的信息。大部分内容与图像无关，但我对编码非常陌生，有些内容可能以不同的方式相关。

//--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/