I've got a grid built using images and text beneath the image. And some of the images are of different height and I'm getting a "staircase effect" that looks like this.
What I'd prefer, is a version where all the text below the image is aligned and the images are
bottomed aligned.
I thought giving the img's container relativepositioning and then setting the imgto position: absolute; with a bottom: 0 would solve this but no dice.
If I give the img's container a height in pixels it solves this, but when I start resizing the browser the img containers' height stays at a fixed height and doesn't look good on small screens.
Any idea on how to set the img container height automatically (for responsiveness) and for it to keep the images and text aligned?
I've setup a Codepen with my struggles here: http://codepen.io/realph/pen/zFEdv
Any help is appreciated. Thanks in advance!
Add the below css:
.row > ul > li{
display: table-cell;
vertical-align: top;
}
and remove img styling where you are positioning the image.
Working Fiddle
Related
I am trying to build a completely centered slider with images in different sizes.
I used flexbox to center the div of the slider and now I have to center the images inside it. I tried to use flexbox in there as well but it didn't seem to work for me.
I uploaded it here so that you can see whats wrong.
It's because your container is too big. Your container should be as big as your images OR you should put display:flex; justify-content:center; align-items: center; on the container that contains the images.
Either way, your container can't have a width of 100% or the inside will never be aligned to the center...
Just edit your css style by adding this:
.slider img {
margin: 0 auto;
}
I've built a simple example pen: http://codepen.io/rpkoller/pen/tcwFj. I have a large image going completely across the whole container width. My goal was to get a div containing a headline and text to overlay one half of the image (in the example I've covered it completely).
Problem is I've assigned an height of 100% to the overlay div which refers to the parent article element - now the overlay is slightly higher than the image.
Guess it is due to the context.
Is there an elegant way to solve and work around that issue?
I think that the following works:
img {
width:100%;
max-width: 100%;
height:auto; //!important;
vertical-align: top;
}
img is inline and has a small space below it due to line leading.
Adding vertical-align: top fixes it.
See demo at: http://codepen.io/anon/pen/rfCuz
I'm trying to create a centered div with the content of that div (a few images) bottom aligned. Bottom aligning the content is already a tricky issue that I've resolved (using HTML image bottom alignment inside DIV container). However, the solution removed the centering of the div.
The way I was centering was using display: inline-block;
Original, before bottom aligning content:
http://jsfiddle.net/5NuBD/
The fix to bottom align was adding
display: table-cell;vertical-align: bottom;
New, with bottom aligned content, which is no longer centered:
http://jsfiddle.net/KurpZ/
I'm looking for a centered div that is also bottom aligned. It seems these two solutions are incompatible.
If the div can be a fixed width :
#wrapper {
text-align:center;
margin: 0 auto;
width: 230px;
}
I ended up setting the css to a fixed width, as suggested by Chris. I then used jquery to sum the widths of each image and manually set the .width() after the page loaded. This works.
I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle