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%;
}
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% />
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.
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>
Related
I have an image inside a div container that's inside another container like so:
<div className='container'>
<div className='imageContainer'>
<img src='whatever' />
</div>
</div>
I want the imageContainer to stay within the container, but keep the image inside that container to the same size.
I added css so now when the screen's width decreases, the image slides out of frame.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
Before I added this css the image would shrink in size to fit inside the imageContainer which is fit inside the outer container.
Is it possible to have the image stay in place inside the container and not shrink in size or width, rather just be cut off on one side?
For example if I would decrease the screen width the image's lefthand side would stay in place while it's righthand side is continuously cropped.
I couldn't find anything to help with my particular css issue, so if anybody knows a solution that would be greatly appreciated.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
<div class='container'>
<div class='imageContainer'>
<img src='https://via.placeholder.com/2560x1440' />
</div>
</div>
Check if you added your overflow: hidden in correct place
.imageContainer {
border: 2px solid purple;
padding: .3rem;
width: 100%;
}
.container {
max-width: 600px;
border: 2px solid red;
padding: .3rem;
}
.container--crop {
overflow: hidden; /* add overflow: hidden to upper parent container */
}
<p>Not cropped</p>
<div class='container'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
<p>Cropped container</p>
<div class='container container--crop'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
Add height to your css:
.imageContainer
{
border: 2px solid black;
width: 100%;
height:100px;
overflow: hidden;
}
Check the link: jsfiddle.net/majidliaquat/zfqjxd35/8
I'm making a simple game for my coding course and have been stumped by this strange outline around my images. At first I thought it was Bootstrap 3, but when I plugged the bare bones into a jsfiddle I've got the same outline. Note that this is not the thumbnail border that gets set in thumbnail images. I've thought about overwriting some border # rule but haven't a clue as to what to try.
I've redone the images thinking this might be some artifact of Inkscape, but nope. Any help in either removing the border or making it transparent would be appreciated.
css, note the commented out attempts:
#tommy img {
background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
height: 200px;
width: 200px;
/*
border: transparent !important;
background: transparent;
border-width: 0 !important;
border: none !important;
border: none;
border: 0px;
border-color: #7A45D2 !important; attempt to at least affect the darn thing.
*/
}
and the bit of html:
<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img>
</div>
the jsfiddle is here: fiddle
The border is coming from you using an img tag without a src specified and the background set as an image. There are two ways you could fix this:
1) Keep setting the image via the background url, but use a different element (probably a div).
HTML:
<div id="tommy" class= "theGroup player-up">
<p>Tommy</p>
<div/>
</div>
CSS:
#tommy div {
background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
height: 200px;
width: 200px;
}
2) Keep using an img tag, but set the image via the src attribute instead of the background.
HTML:
<div id="tommy" class= "theGroup player-up">
<p>Tommy</p>
<img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png"/>
</div>
CSS:
#tommy img {
height: 200px;
width: 200px;
}
HTML:
<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png">
</div>
CSS:
#tommy img {
height: 200px;
width: 200px;
}
Create a transparent gif and save it in your img folder. Then use this code. Works like a charm, gone are the ugly borders.
<div>
<img src="img/transparent.gif" id="tommy" class="theGroup player-up">
<p>Tommy</p>
</div>
#tommy {
background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
height: 200px;
width: 200px;
}
Hi I am trying to develop a web page. In that I am supposed to place an image at the center of the page. Below that image I placed an div so that by clicking on that div certain items will be displayed.My problem is that when the size of the window reduced the image will become responsive,but not that div. I want to make both of them responsive.Here is my code
index.html
<div class="container">
<div class="row">
<div class="col-lg-12" style="top:-125px;">
<img id="i1" class="img-responsive" src="img/2.png" height="600" width="600" alt="">
<div style="padding-left:45%;top:-250px;">
<div id="triangle-up"></div>
</div>
</div>
</div>
</div>
this is my css
#triangle-up {
position: absolute;
bottom:0;
left: 46%;
padding: 5px;
width: auto;
height: auto;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 67px solid grey;
}
.container
{
position: relative;
}
Please help me to solve this issue..
Use CSS to set up width of your div to 100% and max-width as pixels amount that you don't want your div to grow any larger than.
I need to display an image inside a div with bootstrap and there's an uncalled for white space around the image. This is what it looks like:
I'm not talking about the white background - it's intentional. I am talking about the fact the image doesn't stretch to the width of the div. This is the code I'm using:
<div align="center" class="col-xs-3 col-sm-2 col-md-3 whitebgdiv" style="border:0px solid red; margin-top:5px; margin-bottom:5px; margin-left:5px;">
<img src='#{product.thumbnailUrl}' style="border: 0px solid blue;" class="img-responsive productimg vertical-align2" /> <br/>
</div>
The relevant css classes:
.whitebgdiv {
background-image:url('../resources/images/whitebg.jpg');
border-radius: 2px;
margin-left:0px;
}
.productimg {
width: 6em;
max-width: 180px;
}
I tried display:block and display:inline but they do nothing. What am I missing?
Try this:
.productimg{
width: 100%;
height: auto;
}
If the width of its container is defined, you don't need to set a max-width on the image either with this code.
use width 100% and remove max-width.
.productimg { display:block; width: 100%; height:auto;}
Remove the width to image the white space is due to max-width to image tag. the container(div) with is higher then the image width so your getting white space between those
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I can't remove white space under my images after i added boarder.
How do i get rid of this?
<div style="width: 1200px;">
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
http://postimg.org/image/5rvgc5h8p/
Fiddle: https://jsfiddle.net/mastervision/zap4smbm/
I use the Magento editor: http://postimg.org/image/c62ljlmoj/
Add this
div{
line-height: 0;
}
Fiddle
In your floated container, give your images display: block; and width: 100%.
This will cause the image to stretch it's width to it's parents width and if this parent has no height defined it should fit exactly.
If that doesn't work please post a comment under my answer and I'll setup a case for you when I find the time ;)
OFFTOPIC
Oh and ofcourse you'll want to get rid of all that inline CSS.
inline css is pure duplication of code and can be solved with external stylesheets.
In such a stylesheet you can style by name basically so you can do this in your stylesheet:
.my-image-box {
position: relative;
float: left;
width: 300px;
height: auto;
}
.my-image-box img {
display: block;
width: 100%;
}
Then in your HTML, after linking your fresh stylesheet you can do this:
<div class="my-image-box">
<img src="..." />
</div>
This means you don't have all that bulky CSS in your HTML file - making it alot smaller and as an added bonus, when you change something in your stylesheet you'll change it everywhere at the same time :D
IMO that is a double win!
It's because the source of your image is supposedly not the right size or aspect ratio for this size. If you could post a fiddle, I would be able to test this theory. You can fix it by using the object-fit property or using the background property.
Try
img {display: block;}
if images dimensions are right and you are still having white space.
One option would be to use the vertical-align property; e.g.
img {
vertical-align: baseline;
}