Bootstrap3 uniform responsive circular images

Question

Using Bootstrap3 I am trying to display a row of round circular images. Although the original images are:

not round
maybe of varying dimentsion
should all be rendered the same size
be responsive

I have a basic layout working at full screenbut when I re-size my browser the responsive image does not retain the circular shape (it become elongated):

http://www.bootply.com/IPiaTmbF1J

I am using the img-round class to make the image cicular, but I think the problem is related to the following style, but without it the circular images are not the same size:

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

Is what I am trying to achieve possible?

Thanks,

Alan.

possible duplicate of [How to turn images into circle shape? Bootstrap 3](http://stackoverflow.com/questions/22445276/how-to-turn-images-into-circle-shape-bootstrap-3) — Miomir Dancevic, Dec 16 '14 at 06:25
Answwered here http://stackoverflow.com/questions/22445276/how-to-turn-images-into-circle-shape-bootstrap-3 — Miomir Dancevic, Dec 16 '14 at 06:27

score 0 · Answer 1 · answered Feb 09 '19 at 03:52

To achieve uniform circular images on site, you can use the open source library bootstrap-spacer via NPM

npm install uniformimages

or you can visit the github page:

https://github.com/chigozieorunta/uniformimages

Here's an example of how this works using the "unim-circle" class (you'd require jQuery for this):

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

score -1 · Answer 2 · answered Dec 19 '14 at 05:37

-1

you try this jQuery script and set height depend on width.

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

Live Demo

answered Dec 19 '14 at 05:37

Mansukh Khandhar

2,542
1
19
29

Bootstrap3 uniform responsive circular images

2 Answers2