Bootstrap 3: how do I change the width of 'a' tag exactly like the width of image it contains? - css

Question

How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt

Answer 1

You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}

Answer 2

I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)

Answer 3

I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.

Answer 4

Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>