CODEWITHSUNDEEP
htmlcssbootstrap-4
Sumon Kaysar
Sumon Kaysar

Reputation: 51

Bootstrap div border taking spaces

enter image description here

Hi!

I'm using bootstrap 4 and making my own project. After some time I found a problem which I can't fix. I have placed an image into a div section and made the div to be 200px of height & width and overflow will be hidden. Then I made the height of the image 100% of the div and gave a background color(bg-light) and border(5px solid black) to the div. But the background color is seen 1px left, top and right of the div and the image is placed after the 1 px left, right and top.

HTML:

<div class="profile-image-container">
    <img class="profile-image" src="image.jpg" />
</div>

CSS:

.profile-image-container{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    overflow: hidden;
}

.profile-image{
    height: 100%;
}

Upvotes: 0

Views: 279

Answers (2)

terrymorse
terrymorse

Reputation: 7086

Below is the code from the original question, with a placeholder image.

Unlike the image posted to the question, there is no white border between the enclosing div and the image.

enter image description here

The may be some additional CSS that was not included in the question to account for the white border between the div and the image.

.profile-image-container{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    overflow: hidden;
}

.profile-image{
    height: 100%;
}
<body style="background-color:#e0e0e0; padding:0.5rem">
<div class="profile-image-container">
    <img class="profile-image" src="https://via.placeholder.com/210x200" />
</div>
</body>

Upvotes: 0

nano dev
nano dev

Reputation: 443

I didn't understand your question properly.. please tell us what you want as a output. Find the code below, whatever I understand so far

<img class="profile-image" src="img.jpg" width=100% />

Upvotes: 0

Related Questions