I've been trying to make a group of images-list page using bootstrap but I can't make it responsive on other resolutions, The images moves left and the entire style of the arrangement will break.
<div class="fluid-container">
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
in this one ^ The images appears in 1-row and not sided to each other, And when I use style="float: left;" it works but not responsive as I wished, Is there a better way to make a better album{images-list} using bootstrap?
Your images are responsive.
In the sense that they do scale down depending on parent size.
Here is how .img-responsive is defined in Bootstrap 3:
display: block;
max-width: 100%;
height: auto;
Please note, as Sreemat well pointed out, you do not need to wrap the images in <div>s since they already have display:block.
The problem is most people, when they say responsive they also expect it to grow in size according to the parent's width, which .img-responsive does not do, as doing that has the potential of making small images look really bad.
But if that's your desired behavior, add this to your CSS:
.img-responsive {
min-width: 100%:
}
Related
What I'm trying to do is put three images (this one: http://baseframe.co/a/img/animus.png) in a three column grid system with two layers.
I really struggle with putting divs next to each other so if anyone can explain it alongside the problem I'm having about, it'd be really helpful!
Thanks,
Aaron
EDIT:
Here is my code:
`http://codepen.io/aaronmtx/pen/PGdGyA`
You probably want to use display: inline-block. So...
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
Where each <div> and <img ...> is styled...
div {
display: inline-block;
}
img {
width: 100%;
}
This is a very simple approach as you will likely want some additional styles to be applied. Constrain the width of each <div> to say 33% to get three equal sized images in a row. Then repeat the HTML so it will break the next three images on a new line. Applying a width of 100% to each <img ...> will ensure they don't spill out of their respective div containers.
Hope this is what you were looking for!
I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.
I'm working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It's not a problem to make them responsive (kinda "liquid") with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.
Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!
Use percents and #media
Example :
#media only screen and (min-width : 320px) {
img {
width:40%;
height:60%; /*Images should be bigger in small devices*/
}
}
#media only screen and (min-width : 480px) {
img {
width:30%;
height:55%;
}
}
Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.
max-height is another choice.
Well, let's see if I understood good enough your question (my bad english, not yours).
If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.
This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.
Here is an example: I've use different sizes images some horizontal and some vertical so it can be easier to understand.
Basic html:
<div class="header">
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
</div>
Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.
FIDDLE
The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:
the green color is the background of the images container:
FIDDLE
There may be better options but without the help of jquery I can't help you more
If your goal is to keep the images (or their container's) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a 'responsive' solution that comes from making container elements themselves responsive rather than instead of the images.
The case you're referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the 'building blocks' you'll be needing for in order to achieve this effect... granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you're trying to achieve.
HTML
<div class="wrapper bg-purple center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
<div class="clear-both"></div>
<div class="wrapper bg-cyan center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
CSS
.wrapper {
display: table;
}
.img-container {
height: 50px;
padding: 2px;
}
.center-div {
margin: 0 auto;
}
.left {
float: left;
}
.clear-both {
clear: both;
}
.bg-purple {
background-color: purple;
}
.bg-cyan {
background-color: cyan;
}
#media only screen and (max-width: 450px) {
.left {
clear: both;
}
}
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I am working on a website and I am trying to make use of the grid/column system provided in bootstrap. What I want to do is have a picture on the left side with the text beside it to the right. This is the html that I have written so far:
<div class="container">
<div class="row">
<div class="col-xs-4 circle-pic">
<!-- circle -->
</div>
<div class="col-xs-8">
words and stuff go here
</div>
</div>
</div>
and this is the css that I've written so far:
.circle-pic {
height: 150px;
width: 150px;
border-radius: 100%;
border: 2px solid black;
}
My problem is that the first div is not taking up 4 columns as I expect it too which is causing it these elements to be uncentered. I think the problem occurring because I specified the width and height for the circle and that is overwriting something in col-xs-4. Is that the case? If so, how would I go about centering these elements? If not then, Why is the circle not taking up 4 columns worth of space?
EDIT: I am using bootstrap 3.2.0. I have tested on safari and chrome and I do not have any custom rules for col-xs-4.
No, the border radius will not affect the table style.
The width will. It will force the div to be 150px wide on every resolution which will make it not responsive anymore.
Bootstrap has a feature for showing round pictures. You can doing that like this:
<img src="..." alt="My image" class="img-circle">