html - 图像不是固定的高度和宽度以响应所有分辨率

Question

我创建了一个个人资料页面，其中使用了许多不同尺寸的图像。为了让它响应，我使用了 twitter bootstrap3。对于图像，我使用了 img-circle m-t-xs img-responsive，但静止图像没有以固定的宽度和高度显示，如下所示。

但是当我为 .img-responsive 添加固定的高度和宽度时，它会起作用，如下所示，但我再次知道这对响应式设计有害。

.img-responsive {
     height: 100px;
     width: 100px;
}

而且实际 View 看起来不错，如下所示 当我放大时，它显示出很多空白，如下所示

实际浏览

放大 View

任何人都可以帮助我如何让所有这些图像具有固定的高度和宽度以响应所有分辨率。还有我在放大时如何安排那些空白

我的完整网页在下面的插件中可用(我还没有为 .img-responsive 类添加固定的高度或宽度，可以通过添加它来测试)

https://plnkr.co/edit/qIDGjikGDetKI4LFAtmK?p=preview

Answer 1

也许是这样的:

<div class="col-lg-4">
  <div class="contact-box row">
    <a href="profile.html">
      <div class="col-xs-4 col-sm-3 col-md-2 col-lg-4 text-center row">
        <div style="width: 100%; padding-top: 100%; overflow: hidden; position: relative; height: 0;">
          <div style="border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url('https://cdn2.thedogapi.com/images/SkatQTaEQ.gif'); background-position: center; background-repeat: no-repeat;">
          </div>
        </div>
        <div class="m-t-xs font-bold">House Name</div>
      </div>
        <div class="col-xs-8">
          <h3><strong>Tinkku Baby</strong></h3>
          <p><i class="fa fa-map-marker"></i> City Name</p>
          <address>
            <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
          </address>
        </div>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>