如何更好地缩放此图像？ （自举）

Question

我可能会以错误的方式解决这个问题。我有两列，右边是图像。我在.back上设置了一个填充，我希望我创建的图像都是

1. 回应。 IE，按比例调整大小以使其中的部分内容永远不会被切断。我相信这已经实现了。
2. 使用给予它的所有空间。我不明白为什么这个图像的右边缘在页面右侧之前结束。我使用container-fluid将宽度设置为100％，列数加起来为12.想法？

作为第二个问题，我已将text-center添加到图像周围的div中，那么为什么当窗口尺寸非常小时图像不居中？

.fluid-img {
width: 100%;
  height: auto;
}

.back {
 padding-top: 150px;
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'> 
<div class='row'>
            <div class="col-md-5 col-sm-12 col-xs-12">
                <div class='text-center'>
                    <h2 class="title"> Title</h2>
                 
                </div>
            </div>
            <!--//col-->

            <div class='col-md-7 col-sm-12 col-xs-12'>
                <div class='text-center'>
                    <img src = "http://i.imgur.com/g4sTWMZ.png" class = 'fluid-img'>

                </div>
            </div>

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

Answer 1

代码没有任何问题..你正在使用的图像在右侧有很大的空白区域，因为它无法看到它的图像..下载图像然后裁剪它...你的问题是解决

Answer 2

1. 为了更好地扩展你的图像你应该使用img-responsive calss of bootstrap。
2. 您的图片在右边缘之前结束，因为它在右侧包含透明像素，我裁剪了您的图像，现在它看起来很好。
3. 由于右侧的透明像素，您的图像没有居中。
＆＃13;
＆＃13;
.fluid-img {
width: 100%;
  height: auto;
}

.back {
 padding-top: 150px;
  overflow: hidden;
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'> 
<div class='row'>
            <div class="col-md-5 col-sm-12 col-xs-12">
                <div class='text-center'>
                    <h2 class="title"> Title</h2>
                 
                </div>
            </div>
            <!--//col-->

            <div class='col-md-7 col-sm-12 col-xs-12'>
                <div class='text-center'>
                    <img src = "http://i.imgur.com/FFeYNDn.png" class= 'fluid-img img img-responsive'>

                </div>
            </div>

  </div>
  </div>
  </div>
＆＃13;
＆＃13;
＆＃13;