1

This is my mark-up:

<Thumbnail src="/path/to/image"  />

This is the generated html:

<div src="/path/to/image" class="thumbnail" ><img src="/path/to/image" ></div>

This is the CSS (which comes from bootstrap-sass):

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border 0.2s ease-in-out;
    -o-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}

.thumbnail > img, .thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

And this is the result:

pic

The issue is that the border is on the div. Because the image is smaller than the div this looks odd. I would prefer the border to be on the image. The second selector above, thumbnail > img, uses max-width, and this is essential to prevent a hi-resolution image springing out of its container. So - given these CSS rules to prevent the image springing out it looks the Thumbnail has correctly put the .thumbnail class on the containing div. But then the border is on the containing div, not on the img tag.

If I just put the Bootstrap img-thumbnail class directly on the image (and forget React-Bootstrap Thumbnail altogether) I get the result I want.

pic .img-thumbnail has the max-width and the border.

It looks like .thumbnail is coming from bootstrap-sass. So, overall, I'm not sure if this is a problem with react-bootstrap or bootstrap-sass. At any event the React-Bootstrap Thumbnail component does not work as I would expect. Is this an error or user error?

  • have you tried setting another prop, like width/height, keepAspectRatio, scale, .. ? – Felippe Duarte May 09 '16 at 17:52
  • I've noticed that the CSS for .thumnail > img in the pure Bootstrap CSS (direct from the CDN) does not have the max-width. Otherwise it is the same as the CSS generated by Bootstrap SASS. I'm not really sure of the purpose in Bootstrap of the .thumbnail class. Because there is a selector .thumbnail > img it is obviously intended to be put on a containing element (e.g. a div) - but then this element will get the border not the image. The .img-thumbnail class makes more sense and appears to be intended as per the docs to be added directly to an image tag. –  May 10 '16 at 10:02

0 Answers0