Question

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

不是圆的
可能是不同的dimention
应该全部呈现相同的大小
回应

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

http://www.bootply.com/IPiaTmbF1J

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

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

我想要实现的目标是什么？

谢谢，

艾伦。

Answer 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>

Answer 2

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

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

直播Demo

Bootstrap3均匀响应圆形图像

2 个答案: