Image exceeding grid bootstrap size

Asked

Viewed 719 times

2

I set a grid and inside I played an image, that image needs to have a height of 150px, so I set it to height to it, the problem is due to the fact that the image is exceeding the grid, I do not want to force a width of 100% with a height of 150px because the image will be blurred, How do I give a Hidden in the remaining width of the image? I tried to overflow Hidden but it is no use, below this image has an H5 that by the way picks up the right width, only the image even if it is with problems, see print and part of the code: inserir a descrição da imagem aqui

Code:

<div class="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

  • It would not be better to put the image in "background-image" and in CSS to put a "background-size: cover" so the image would not lose the proportion! Worth a try.

  • the col-md is inside div class="row"?

1 answer

2

Guys I managed to solve as follows: I gave a Hidden overflow inside the tag that defines the grid and not in the image itself, so it worked, I’ll show you how it looked:

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

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.