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
Related
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>
I have user generated content that needs to scale to fit in the parent container.
I don't have control of anything inside the div.
.container {
max-width: 300px !important;
border: 1px solid black;
}
<div class="container">
<p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
<p>
Other content
</p>
<p>
CSS IS AWESOME
</p>
</div>
How to I keep the content bound?
So you have to specify for all children at any level have max-height of 100% of parent element :)
.container {
max-width: 300px;
border: 1px solid black;
}
.container *{
max-width:100%;
}
<div class="container">
<p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
<p>
Other content
</p>
<p>
CSS IS AWESOME
</p>
</div>
And I'd suggest you get rid of !important if nothing else is modifying element so CSS name would be justified for word Cascading :)
I'm not sure why you're setting the image width inline to a set pixel width, but this will ensure the image never exceeds the bounds of it's container:
CSS:
img {
max-width: 100% !important;
}
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;
}
Border is not displayed properly.Side and bottom ones
are missing.
here shorthand property is acting like top-border
property.
If we apply height tag to container than container than
borders are displayed correctly but it should work on its own.
CSS
.container
{
border:1px solid black;
}
.container DIV
{
width: 15px;
border: 1px solid Blue;
margin: 1px;
}
HTML
<div style="width: 200px; " class="container">
<div style="float: left;">1</div>
<div style="float: left;">2</div>
<div style="float: left;">3</div>
<div style="float: left;">4</div>
<div style="float: right;">5</div>
<div style="float: right;">6</div>
<div style="float: right;">7</div>
<div style="float: right;">8</div>
</div>
You need to provide more code (including the html that shows the actual container element). However, my guess from what you have said is that adding overflow:hidden to your style should fix it.
.container
{border:1px solid black;
margin:auto;
margin-top:33px;
overflow:hidden;
}
If elements within your container are floating, then the container acts like it has a height of 0. This would cause a border to be a single line at the top. Overflow:hidden gives it the height including any floating elements (see http://www.w3.org/TR/CSS21/visudet.html#root-height )
As I say, more code would be required to say if that is what the issue is in your case but it is a common cause of that style problem.
Update your container class like below.
.container
{
border:1px solid black;
display:table;
}
Fiddle DEMO
As you are using float property on child elements. to fix it just use overflow:hidden on parent element i.e. in your case use add overflow on class .container.
Here is a DEMO.
.container
{
border:1px solid black;
overflow:hidden;/* Added Line*/
}
Although this question is asked before, my problem is little different. I have a div, within which I have two images. First image needs to be stayed left align, where as the second image needs to be center aligned. The div has no fixed width, so that it covers the heading. I have created a fiddle, which can be found here.
Any suggestion will be very helpful to me.
Case 1
Add text-align:center to the div class.
Give float:left to the first image by using pseudo class so that your second image will be center aligned to the div and first image will be left aligned.
Here is the demo http://jsfiddle.net/Eevpc/5/
Case 2
Do it by position:absolute
.brandLogo {
margin: 15px; background-color:red; text-align:center; position:relative;
}
a img:first-child {
border: 0 none; position: absolute; left:0;
height: auto;
vertical-align: middle;
}
img {
border: 0 none; margin:0 auto !important;
height: auto;
vertical-align: middle;
}
Demo http://jsfiddle.net/Eevpc/11/
In case 1, second image is center for the remaining width of the div (ignoring the space occupied by the first image).
In case 2, second image is aligned to the exact center of the original div width.
Hope this will work.
.div_class{
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks
Try this:
<div id="main" style="text-align:center; width:100%;">
<div id="left" style="float:left;">
<img src="..." alt="..."/>
</div>
<div id="right" style="float:right; width:100%; text-align:center;">
<img src="..." alt="..." style="margin:0 auto;" />
</div>
<div style="clear:both; content:'.'; display:none" />
</div>