I have four images with different heights and I would like to do a masonry-like column grid using CSS columns. The following CodePen example doesn't fill the third column when setting columns to 3:
https://codepen.io/glennreyes/pen/pwjOmy
.columns {
columns: 3;
}
<div class="columns">
<img class="image" src="http://lorempixel.com/400/400" alt="" />
<img class="image" src="http://lorempixel.com/400/500" alt="" />
<img class="image" src="http://lorempixel.com/400/600" alt="" />
<img class="image" src="http://lorempixel.com/400/400" alt="" />
</div>
I want three images at the top and the fourth image to one column underneath. What am I missing to fill the content from top/left to bottom/right in a masonry style correctly?
It appears that the source of the problem is the display value of the images.
Images are, by default, display: inline.
If you switch them to display: block, the column property works.
revised codepen
Related
I have 2 or 3 or more elements inside div like this:
<div style="overflow:hidden;">
<img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt="">
<img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt="">
</div>
Though i have applied "display:inline" style to the elements and there is also "overflow:hidden" applied to parent div, when the elements (together) have more width than the div, the are shown one under another.
Just change the result window size and you will see. So why "overflow:hidden;" does not work, haw can i make these elements always be in one line, with hidden part in case when div is smaller?
Add "white-space: nowrap" to the style of the outer div:
<div style="overflow:hidden; white-space: nowrap">
<img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt="" >
<img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt="" >
</div>
Is it possible to do something like this ? http://morenheit-vesna.tumblr.com/
Say I have 5 images with same widths but different heights. How can I achieve this ?
<div id="content">
<img src="http://66.media.tumblr.com/77855c8b4bb6accb5713c746c730e94c/tumblr_o8gwskDNhK1t0yoveo1_500.jpg">
<img src="http://65.media.tumblr.com/1a0b08e263025da71c9312014e7aa791/tumblr_o5xcdidD051tvh80lo1_500.jpg">
<img src="http://65.media.tumblr.com/578a06593a0efc258e62fd5546d096f7/tumblr_o5gdhuOJcx1rx771wo1_500.png">
<img src="http://65.media.tumblr.com/7701c0870eb08dda60cd7490edf472ed/tumblr_mrs5f7cI9z1rnb624o1_500.jpg">
<img src="http://66.media.tumblr.com/bac0f0e6a248059a2cd61d6f43e34689/tumblr_ngspo2vD3V1t0yoveo1_500.jpg">
</div>
Now they are all in one column with same width in y-axis without paddings
I think, I did :D
<div id="content">
<div class = "col-md-6 text-center">
<img src="http://66.media.tumblr.com/77855c8b4bb6accb5713c746c730e94c/tumblr_o8gwskDNhK1t0yoveo1_500.jpg">
<img src="http://65.media.tumblr.com/1a0b08e263025da71c9312014e7aa791/tumblr_o5xcdidD051tvh80lo1_500.jpg">
<img src="http://65.media.tumblr.com/578a06593a0efc258e62fd5546d096f7/tumblr_o5gdhuOJcx1rx771wo1_500.png">
</div>
<div class = "col-md-6 text-center">
<img src="http://65.media.tumblr.com/7701c0870eb08dda60cd7490edf472ed/tumblr_mrs5f7cI9z1rnb624o1_500.jpg">
<img src="http://66.media.tumblr.com/bac0f0e6a248059a2cd61d6f43e34689/tumblr_ngspo2vD3V1t0yoveo1_500.jpg">
</div>
There are several options. One would be to create a table, say, with 5 columns, and within each table cell deploy all the pictures you want for each cell (taking care of margins of course).
You can even try float option and then using margin to align them properly as below,
#content > img{
float:left;
margin:10px;
}
I have a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.
CSS
.image {
height:50px;
}
HTML
<div class='span6'>
<img class='image' />
</div>
<div class='span6'>
<img class='image' />
</div>
Is it possible to cancel the style when the Bootstrap's responsive works?
I need these image to be displayed without crop by CSS, assuming that the picture's height is 400px.
Thank you
You need to surround the images with a maximum width that you wish them to be able to go. Preferably in percentage so that it scales on all devices.
Then add the class="img-responsive" to your image tags.
For example
<img src="/path/to/your/image/logo.png" class="img-responsive" alt="Something about the image">
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/