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

Posted 2021-05-05

我创建了一个配置文件页面，它使用了许多不同大小的图像。为了使它响应我使用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

答案

也许是这样的：

<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> [phone]
          </address>
        </div>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>