CSS to keep div to the size of content - css

I have code like this:
<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption'>This is a long caption that should wrap...</div>
</div>
What I want is for the outer div to be the width of the image so that the caption under it wraps to the width of the image.
The images are all different sizes but the size cannot be accessed in code to give absolute pixel sizes. The css has to work for different sizes.
I cannot change the structure of the divs.
Can this be done?

Try this:
HTML
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" />
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/>
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/>
<div class="caption">
Caption
</div>
</div>
CSS
.box {
overflow:hidden;
background-color:#ddd;
display:inline-block;
}
img {
padding:10px;
}
Demo
http://jsfiddle.net/andresilich/8Bsgg/1/

Related

Allow image to overflow horizontally in a div

I have a grid section in which I show posts and I display photos and text. However, no photos are the same size and that is inevitable so I try to make them the same size. I cut to the chase, the problem is the width:auto; stretches the image horizontally.
<div class="item_grid item2">
<div class="panel">
<div style="height:50px; overflow:hidden;">
<h4 class="recent-post-header">
Title
</h4>
</div>
<div style="height:300px; overflow:hidden;">
//Problem is Here
<img src="/Image" alt="img_preview" style="height:100%; width:auto; " /> /
</div>
<div style="height:100px; overflow:hidden">
<div class="clearfix post_date">
<span class="pull-left">DateCreated</span>
</div>
<p>Description</p>
</div>
<p> Read More <i class="icon-angle-right"></i></p>
</div>
</div>
Is there any way to allow the width of the image overflow and then hide it?
use
<img src="/Image" alt="img_preview" style="height: 100%; width: 100%; object-fit: cover" >
eventhoug ie doesnt support object-fit
Short and straightforward answers
style="height:100%; object-fit: cover;"

Image size inside div in bootstrap

How to make image inside div not to be bigger than the div? now I set width is set to 500px what is not a good solution.
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-md-12 col-lg-12 col-sm-12 col-xm-12">
<div class="col-md-6 col-lg-6 col-sm-12 col-xm-12"">
<img src="imagesource" class="img-responsive" width="500" height="auto">
</div>
</div>
</div>
</div>
Setting
img {
width:100%;
}
or
<img style="width:100%;"/>
will make sure that an img is never wider than its parent container.
You should remove your inline styles (width and height) for <img>. Also remove double quotes here col-xm-12"">
Jsfiddle here

make image fit height of bootstrap 3 grid

In a bootstrap 3 grid, one of the columns contains an image. How can one make it 100% height of another column? (with biggest height)
img-responsive will fit the width, but not the height. Here's a fiddle: http://jsfiddle.net/mariusandreiana/V2Hy6/17/
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>
Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.
One option would be to use javascript to set img's height, but can it be done only via CSS? Would a table be a better fit than the grid?
Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.
You have to set a max-height to the parent :
Fiddle : http://jsfiddle.net/V2Hy6/19/
CSS :
.bg {
background-color: #FFAAAA;
height:100%;
}
.img-container{
height:100%;
max-height:200px;
}
img{
height:100% !important;
}
HTML :
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5 img-container">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>

Bootstrap 3 responsive images side by side same height

Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4 hasn't the same height.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/u9av6/3/
Thanks!
try this:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Here's a working version, with jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Maybe your problem is that in your code, the padding is not considering.
Your 400px and 800px is nice, but with padding considering it's not good.
In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...
The padding in each .row is 15px left and right.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
css:
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
fiddle : http://jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...
UPDATE AFTER COMMENT:
*Why 45px ?*
Image 1 is float:left so it has just the padding-right at 15px
Image 2 has padding left and right at 15px {=30px}
So in order do equality (to get same constraints) you need to transmit the total padding to image 2
To make the images displaying side by side, you need to do three things:
1st: make all your images responsive in the html file like this:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
This is for putting two images side by side. You could have as many images as possible.
2nd: Inside your css, give the height to these images like this:
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
My html is
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
if you want constant height, should add these properties:
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.

How to wrap text around image that is behind text

This would be the situation, i'll try keeping it clear:
<div id="text">
text...text...
</div>
<div id="image">
<img>
</div>
How can I show the image on top and wrap text around the image?
Thanks.
<div id="image">
<img style="float:left" />
text...text...
</div>
It's good practice to wrap your text elements in a paragraph tag, although both block-level and inline-level elements will wrap around a floated element:
http://jsfiddle.net/Wexcode/UsvQd/
<div id="text">
<div id="image"><img src="#" alt="" /></div>
<p>text...text...</p>
</div>
CSS:
#image { float: left; }

Resources