图像的高度和宽度不是固定的，以响应所有分辨率答案

【问题标题】：Images not in a fixed height and width in responsive for all resolutions图像的高度和宽度不是固定的，以响应所有分辨率
【发布时间】：2019-04-20 15:44:11
【问题描述】：

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

但是当我为.img-responsive 添加一个固定的高度和宽度时它可以工作，如下所示，但我再次知道这对响应式设计会造成伤害。

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

实际视图看起来也很好，如下所示当我放大时，它显示了很多空白，如下所示

实际视图

放大视图

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

我的完整网页在下面的 plunker 中可用（我没有为.img-responsive 类添加固定的高度或宽度，可以通过添加来测试）

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

【问题讨论】：

标签： html css twitter-bootstrap-3 responsive-design responsive

【解决方案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>

【讨论】：