Image surpassing bootstrap grid size

Question

Image surpassing bootstrap grid size

Navigation

#1 by (3 votes)

3

I defined a grid and inside I played an image, this image needs to have a height of 150px, so I set the height to it, the problem is due to the fact that the image is surpassing the grid, I do not want to force 100% width with a height of 150px because the image will be blurry, how do I give a hidden the remaining width of the image? I tried to give a hidden overflow but it does not work, under that image there is an h5 that, by the way, takes the right width, only the image even if it is in trouble, see print and part of the code:

Code:

<divclass="col-md-2">
    <img src="images/produtos/rasp.webp" height="150">
    <h5><a href="#" class="linkProduto">Raspberry Pi Zero V 1.3 Com Conector P/câmera Pronta Entrega</a></h5>
</div>

css bootstrap

asked by anonymous 19.02.2017 / 01:35

1 answer

preApproval data is required Is it possible to know the number of lines that a text occupies in a p?

score 3 · Answer 1

I was able to solve this problem as follows: I gave an overflow hidden inside the tag that defines the grid and not in the image itself, that way it worked, I will show how it was:

<div class="col-md-2" style="overflow: hidden;">
    <img src="images/produtos/rasp.webp" height="150">
    <h5><a href="#" class="linkProduto">Raspberry Pi Zero V 1.3 Com Conector P/câmera Pronta Entrega</a></h5>
</div>

I hope to help future people with the same problem I had.