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;
}
Related
I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
I'd like to use flexbox to create a flip card have an image (using the <picture> element) on the front and some information on the back site.
Images can have different width/height ratio, but should be always centric. I achieve this by using (actually the sizes attribute determines the width of the element):
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
The backside of the card should be the same as the front, which is defined by the image size. Current CSS implementations of flipcards assigning an fixed width/height to the container. I would like to end up with something like this:
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<div class="flip-container">
<div class="flipper">
<div class="front">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
<div class="back">
SAME SIZE AND POSITION AS IMAGE
</div>
</div>
</div>
</div>
Flipcard structure was taken from David's page.
Is there a possibility to get this done using CSS only?
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
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.
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/