Bootstrap3 统一响应圆形图像答案

【问题标题】：Bootstrap3 uniform responsive circular imagesBootstrap3 统一响应圆形图像
【发布时间】：2015-02-14 03:40:00
【问题描述】：

使用 Bootstrap3 我试图显示一排圆形图像。虽然原始图像是：

不圆
可能有不同的尺寸
都应该呈现相同的大小
反应灵敏

我有一个全屏工作的基本布局，但是当我重新调整浏览器的大小时，响应式图像不会保留圆形（它会变长）：

http://www.bootply.com/IPiaTmbF1J

我正在使用 img-round 类制作图像圆形，但我认为问题与以下样式有关，但没有它，圆形图像的大小不一样：

.dabRes .img-responsive {
    width: 200px;
    height: 200px;
    border: 2px solid #bfbfbf;
}

我想要实现的目标可能吗？

谢谢，

艾伦。

【问题讨论】：

How to turn images into circle shape? Bootstrap 3的可能重复
在这里回答stackoverflow.com/questions/22445276/…

标签： css twitter-bootstrap-3

【解决方案1】：

要实现现场统一的圆形图片，可以通过NPM使用开源库bootstrap-spacer

npm install uniformimages

或者你可以访问github页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“unim-circle”类如何工作的示例（为此您需要 jQuery）：

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim-circle"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim-circle"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim-circle"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

【讨论】：

【解决方案2】：

你试试这个 jQuery 脚本并设置高度取决于宽度。

jQuery(document).ready(function($) {
  var cw = jQuery('.dabRes').width();
  jQuery('.selDab').css({'max-height': cw + 'px'});
});

直播Demo

【讨论】：