I'm a rookie "programing" and asking for help here in stackoverflow.
I'm having a little problem trying to fit an image inside my grid.
For example, when I have an image with a specific size it works but when I have an image a bit larger or in a different format (16:9 instead of 9:16) it show the image not in the full size but not cut it to fit the grid .
What I Want
What I Get
I use the same HTML code and CSS for both grids the only thing that changes it's the image. I'm using Bootstrap with some CSS.
The CSS
.grid {
position: relative;
clear: both;
margin: 0 auto;
max-width: 1000px;
list-style: none;
text-align: center;
}
.grid figure {
position: relative;
overflow: hidden;
margin: 10px 0;
height: auto;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
width: 100%;
opacity: 0.8;
}
<div class="gallery">
<div class="container">
<div class="gallery-grids">
<div class="col-md-4 gallery-grid">
<div class="grid">
<figure class="effect-roxy">
<a class="example-image-link" href="/images/fotos/gal1.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">
<img src="/images/fotos/gal1.jpg" alt="" />
<figcaption>
<h3>Maecenas <span>lacus</span></h3>
<p> Aenean fermentum nisl ac imperdiet commodo</p>
</figcaption>
</a>
</figure>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
I believe you have 2 options, one is to add images as backround and use cover, or if images comes from img tag then use
img {
object-fit: cover;
object-position: center;
}
Note, this does not work in old ie version
You can try to create a trim class in CSS like this
div.trim {
max-height:292.2px;
max-width: 350px;
overflow: hidden;
}
then add a new out of the image div to lock it
<div class="gallery">
<div class="container">
<div class="gallery-grids">
<div class="col-md-4 gallery-grid">
<div class="grid">
<figure class="effect-roxy">
<div class="trim" >
<a class="example-image-link" href="{$product.image}" data-lightbox="example-set" data-title="">
<img src="{$product.image}" alt="" />
<!--<figcaption>
<h3>Maecenas <span>lacus</span></h3>
<p> Aenean fermentum nisl ac imperdiet commodo</p>-->
</figcaption>
</a></div>
</figure>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Related
I am currently making a carousel of images. (Carousel is based on a library, not in the scope of this question as i also cannot get it to work outside the carousel).
What i am trying to do is the following: I have a div and within that div i have an image and a caption (just a line of text or 2). I want the image above the caption and as large as possible (taking up all the space the caption does not take up). But the image keeps exceeding the parent div's height. It is never contained in the parent div. And if it is, it loses its ratio (keeps the same width but height is contained which gives a weird result obviously).
I tried a lot with flexbox like this:
<div class="container"> // <---- this wrapper need a specific height depending on screen size.
<img src="/images/thing.png" class="img" alt="pict">
<div class="caption">
<span>Text</span>
</div>
</div>
and the CSS:
.container {
height: 800px;
}
.img {
width: auto;
height: 100%; // this fills the container with the image but i wont see the caption anymore.
// also tried giving this one flex (NOT in combination with above. Just showing all i tried)
flex: 1 1 0%;
}
.caption {
flex: 1 1 0%; // Or 1 1 auto; no difference
}
How do i go about this? Maybe it is just me struggling with flexbox. Maybe i am approaching this wrongly. Any help/tips is appreciated!
/* Horizontal flex: rows
=====================
*/
.row {
display: flex;
}
.item {
flex: 1 1 30%;
padding-left: 1.5rem;
}
.item:first-child {
padding-left: 0;
}
/* Vertical flex: items
===================
*/
.item {
display: flex;
flex-direction: column;
}
.item-heading {
flex: 1;
}
/* Third flex: item heading
========================
*/
.item-heading {
display: flex;
justify-content: center;
flex-direction: column;
}
/* Not so important CSS - base styles:
===================================
*/
body {
margin: 2rem;
}
img {
max-width: 100%;
height: auto;
}
h2,
p {
margin: 0;
padding: 0;
}
.row {
margin-bottom: 1.5rem;
}
.item-heading {
padding: 1rem;
font-size: 1rem;
background: yellow;
text-align: center;
}
.meta {
color: #666;
margin-bottom: 3rem;
}
.meta p {
margin-bottom: .5rem;
}
<div class="meta">
<h1>
Image gallery with a vertically centered captions
</h1>
<p>
Yellow headings we want both vertical and horizontal centered.
</p>
<p>
There are three nested flexbox containers – row, item and item heading.
</p>
</div>
<div class="row">
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Lorem ipsum dolor sit amet
</h2>
</div>
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo
</h2>
</div>
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Consectetuer adipiscing elit
</h2>
</div>
</div>
<div class="row">
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Nunc dapibus tortor vel mi dapibus sollicitudin
</h2>
</div>
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Mauris elementum mauris vitae tortor
</h2>
</div>
<div class="item">
<p class="item-image">
<img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
</p>
<h2 class="item-heading">
Aliquam ornare wisi eu metus
</h2>
</div>
</div>
codepen : Link
i hope this help you
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to do a boxes like below for my website's events but I got stuck.
The problems I can not solve:
Reduce images to the same size
Create modules of the same size
Align the modules in the same line
.background {
width:360px;
height:200px;
}
.image{
width:100%;
height:100%;
}
.text {
width:100%;
height:25%;
color:#ffffff;
background:blue;
z-index: auto;
}
<div class="background">
<div class="image">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
Questions... and answers. Let's go over the issues you have one by one.
Reduce images to the same size
It's best to let CSS take care of this. By setting the background of an element to the image you want and setting the background-size to cover, the browser will scale the image such that the aspect ratio is maintained and the image nicely covers all of the element you put it in.
Now make all elements the same size and voilà, this point is done.
Create modules of the same size
This can be achieved in two ways.
Set fixed sizes on your boxes.
Use more advanced CSS, in particular the flexbox layout module.
To keep things simple, I'll use the first approach for now. Read up on flex if you are interested in it!
Align the modules in the same line
This can be achieved in many ways, but the most straightforward one is setting display to inline-block. This will make it so that every block in your module is treated as a, well, a block, meaning that it can have a set width and height. At the same time, it is laid out as if it were text. So, one block after another will simply go on the same line. When that does not fit on screen anymore, blocks will flow to the next line.
Putting this all together. Here is a quick toy example that includes all of the above. It should serve as a good starting point to build from.
.card {
display: inline-block;
vertical-align: top;
width: 150px;
height: 270px;
margin: 10px;
padding: 0;
border: 1px solid #444;
border-radius: 5px;
}
.image {
/* width is 100%, so 150px, by default */
height: 150px;
background-size: cover;
}
.text {
height: 150px;
margin-top: -40px;
}
.text > p {
max-height: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-size: 20px;
line-height: 20px;
}
p {
margin: 0;
padding: 10px;
font-size: 15px;
line-height: 20px;
}
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div>
<div class="text">
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/city/');"></div>
<div class="text">
<h1>Bar</h1>
<p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/cats/');"></div>
<div class="text">
<h1>Baz</h1>
<p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p>
</div>
</div>
You need to change your HTML and CSS to make it work properly.
<div class="background">
<div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
then your CSS should look like this:
.background {
width: 360px;
height: 200px;
position: relative;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
height: inherit;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
That will make an image to fully cover the background space and then the .text will be an overlay on the image. Actually, you could even skip the .image div, add background and the CSS to the .background div and it will work as well.
The example you provided features something different than your code is suggesting. If you want to achieve the look from example, then:
.background {
width: 360px;
height: 200px;
position: relative;
background: #fff;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /*
}
.text {
/* actually it doesn't need styling in that case */
}
.background's parent {
display: flex; /* to make the blocks even in height without setting that as a fixed value */
}
Your code and the example you provided are doing different things. In order to get the effect of your example, you need more than one "card" (image and text together).
You can use display: flex on the .background div so that all the cards are the same height. Then you can add some margin to the cards so they are separated a little.
.background {
display: flex;
background: cyan;
}
.card {
width: 360px;
background: white;
margin: 10px;
}
.text {
padding: 0 5px;
}
.text p {
width:100%;
overflow: hidden;
}
<div class="background">
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>test test test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>another test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p>
</div>
</div>
</div>
I'm trying to align a figure caption centered and underneath the Featurette images in Twitter Bootstrap's Carousel Template:
http://getbootstrap.com/2.3.2/examples/carousel.html
Does anyone know how this can be done and have it still work responsively? I tried adding this HTML:
<figure>
<img class="featurette-image pull-right image-responsive" src="../images/file.jpg">
<figcaption>Caption here</figcaption>
</figure>
and this CSS:
figure {
display:inline-block;
margin:10px;
vertical-align:top;
}
figure img {
display:block;
margin:0 auto;
}
figcaption {
display:block;
padding:8px;
}
...to the template's existing code but that wasn't even close. Is there a simple solution to this that works within the Carousel Template's HTML/CSS?
This is the general featurette section HTML:
<div class="featurette">
<a href="#" target="_blank">
<figure>
<img class="featurette-image pull-right image-responsive" data-toggle="tooltip" title="title" src="../images/image.jpg">
<figcaption>test</figcaption>
</figure>
</a>
<h2 class="featurette-heading">Text: <span class="muted">Text</span></h2>
<p class="lead">Some text.</p>
</div>
A centered caption under the three large browser icon images to be specific!
http://getbootstrap.com/2.3.2/examples/carousel.html
add text-align: center
<figure>
<img src="http://24.media.tumblr.com/5b3863c2aa84715bec39a06b7b4fa63b/tumblr_mytjrmq67H1rnq2uxo5_400.png" />
<figcaption>Caption here</figcaption>
</figure>
figure {
display:inline-block;
margin:10px;
vertical-align:top;
text-align: center ;
}
JSFIDDLE DEMO
CSS UPDATED:
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
text-align: center;
margin: 200px auto;
}
this is your solution have fun!
<div class="featurette">
<figure class="row">
<img class="featurette-image pull-right" src="http://getbootstrap.com/2.3.2/assets/img/examples/browser-icon-chrome.png">
<figcaption></figcaption>
</figure>
<h2 class="featurette-heading text-center">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
<p class="lead text-center">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
JSFIDDLE DEMO SMALL SCREEN
JSFIDDLE FULL SCREEN
I'm using Bootstrap 3.0 with below requirements:
Each thumbnail image has fixed known width, let say 200px in this case. There could be multiple columns (if the screen is large, it could have 5-6 columns as needed).
This whole page must be fluid width
The container (.center in this case) must be center of the page
Then within the container (.grid in this case), the thumbnails themselves must be left aligned. For example, if the page fits 3 images per row but the last row only has 2 images, these 2 images must be left aligned.
I am OK to change HTML structure but no JS. Width of page and whole container is unknown.
Example 1: The number of columns is 4 in this case. The images (blue) is left aligned within the gray container which is center of the page (yellow).
Example 2: When the screen width is smaller, the images wrapped down (therefore 3 columns in this case). But the image container is still center and all images are left aligned.
My current code only does left align but the .center class literally has no effect. Somehow I need that .center class (red border) to have the width of the images inside (not full width) and then centered itself.
HTML:
<div class='col-md-12'>
<div class='center'>
<div class='grid'>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
<div class='thumbnail'>
<img src='http://placehold.it/200x200' />
<div class='caption'>
<h3>Donec id elit non mi porta gravida at eget metus</h3>
<p>Fusce dapibus tellus ac cursus commodo</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.col-md-12 {
background: yellow;
}
.center {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.grid {
text-align: left;
}
.thumbnail {
display: inline-block;
width: 215px;
max-width: none;
}
Link: http://jsfiddle.net/qhoc/Rp838/
Any help?
UPDATE 1:
Followed Matt's advise to "Wrap the whole thing in a .container". Still didn't work as you see the red border box is not center of the page.
http://jsfiddle.net/qhoc/Rp838/1/
finally solved it after the entire morning of going through stuff.
here is the jsfiddle for it.
http://jsfiddle.net/Rp838/9/
.menu {
display: block;
height: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
/*flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;*/
}
.menuItem {
display: inline-block;
position: relative;
margin: 0 5px 20px 5px;
max-width: 320px;
}
.menuItem img {
max-width: 100%;
}
.menuItem h2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
text-align: center;
color: white;
font: bold 1.5em/2em Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.menuItem h3 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
text-align: center;
color: white;
font: bold 1em/1.5em Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.menu li {
list-style: none;
}
.menu a {
font-weight: normal;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
.menu a:active {
text-decoration: underline;
}
<div class="menu">
<div class="menuItem">
<a href="history.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="History" />
<h2>History</h2>
</a>
</div>
<div class="menuItem">
<a href="photographs.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Photographs" />
<h2>Photographs</h2>
</a>
</div>
<div class="menuItem">
<a href="videos.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Videos" />
<h2>Videos</h2>
</a>
</div>
<div class="menuItem">
<a href="documents.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Documents" />
<h2>Documents</h2>
</a>
</div>
<div class="menuItem">
<a href="maps.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Maps" />
<h2>Maps</h2>
</a>
</div>
<div class="menuItem">
<a href="biographies.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Biographies" />
<h2>Biographies</h2>
</a>
</div>
</div>
ok here we go, you need to restructure your markup to follow bootstrap standards
CSS
.container {
background: yellow;
}
.thumbnail {
width: 200px;
display: inline-block;
}
HTML
<div class="container">
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
<div class="thumbnail">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>blah blah blah blah blah</p>
</div>
</div>
</div>
Here's a fiddle if you want to see it in action. I made the images responsive so make sure you stretch out the window far enough. On a smaller viewport the image will stretch to fit.
Basically I have a title inside an image. As you can notice from the code and example below, I've set a negative margin-top to position it inside the image, near the bottom. The problem is that the text position/orientation is from top to bottom. Meaning that the more text the title has, the longer it will be, towards the bottom. I want to make it reverse - so that the text div expands the text towards the top, according to its size.
Is it possible? Thank you in advance.
Here is the example http://jsfiddle.net/j7gLd/
HTML
<div class="image">
<img src="image.jpg">
<div class="title">This is a title</div>
</div>
<div class="image">
<img src="image.jpg">
<div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>
</div>
CSS
.image {
width: 800px;
height: 530px;
margin: 10px;
}
.title {
position: absolute;
background-color: #CCC;
max-width: 600px;
margin-top: -80px;
padding: 5px;
}
Here is what you are looking for, give .image position:relative and .title bottom:0; fiddle
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg"/>
<div class="title">This is a title Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.</div>
</div>
<div class="image" style="background:red;">
<img src="http://s23.postimg.org/g033nno17/image.jpg"/>
<div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a titl Lorizzle ipsizzle dolor crunk amizzle, consectetizzle adipiscing get down get down. Mofo dawg velizzle, shiz volutpat, suscipit quis, gravida vel, pimpin'. Pellentesque eget tortor. Sed erizzle. Dope at dapibizzle away tempus shiz. Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.e</div>
</div>
.image {
width: 820px;
height: 530px;
margin: 10px;
position:relative;
}
.title {
position: absolute;
display:block;
background-color: #CCC;
padding: 5px;
bottom:0;
width:790px;
vertical-align:bottom;
}
Set the title to position:absolute;bottom:0;
May i suggest you something different?
Have a look on this fiddle.
Also added hover to see the title.
HTML
<div class="image" style="background-image: url('http://placekitten.com/200/150');">
<div class="footerBar">Small Title</div>
</div>
<div class="image" style="background-image: url('http://placekitten.com/200/150');">
<div class="footerBar">Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title</div>
</div>
CSS
.image {
width: 200px;
height: 150px;
position: relative;
}
.footerBar {
background-color: lightGrey;
position: absolute;
bottom: 0px;
width: 100%;
overflow: none;
display: none;
word-wrap:break-word;
}
.image:hover .footerBar {
display: block;
}
Is vertical-align what you are looking for?