I've designed an image grid using bootstrap using images that are either 360px square, or 360px high by 720px wide. For some reason, the wide images display taller in the row. Any idea why this is happening and how to fix it?
Here is the code in bootply
Thanks!
The images won't display at the same height just because they're the same physical height because they are scaling with your layout. And the padding in each column and elements in the columns reduces the horizontal space available for the images, and when the horizontal size changes, the vertical size will change, too (to scale the image properly).
Look at how the left/wide image is only in a single column, but the 2 images on the right are in 2 columns. There is more padding in the 2 images on the right than on the left (twice as much padding, since there are twice as many images). That's scaling the height of each to be shorter than the image on the left.
I removed the padding from the .col-* classes and .thumbnail to show that if you remove those, the images line up.
http://www.bootply.com/KacXrRCbYH
You would fix this any number of ways, but I think that needs to be up to you as to what's going to work best for your layout. The easiest way is probably just to change the height of the image on the left to account for that padding. 720x341 seems to be the resolution that works there.
http://www.bootply.com/T4F3fdgNyf
Related
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
Images displayed in goolge images end squarely at the right hand side of the page regardless of image dimensions or screen size. I was thinking that perhaps it is possible to add some sort of dynamic padding to make images fit squarely into a div? If anyone has any suggestions on how to do this it would be greatly appreciated!
Define the height of each row and the minimum and maximum width you want.
Calculate the width of your image if you scale it to the given height.
If the calculated width lies between the minimum and maximum width, scale it to this size.
If the width is smaller, scale the image so it has the minimum width, and crop it so it has the proper height.
If the width is bigger then the maximum, scale it this way and crop it, so it has the right width.
In order to make all the images fit the row perfectly, you might need to adjust the minimum and maximum width. Especially images which need to be cropped anyway can be used to adjust the length of the row.
You can achieve this using CSS (& JavaScript) or by doing it on the server side. If your page width is dynamic, you have to rely on CSS/JavaScript though.
So basically I am building a full screen food image grid using bootstrap 3. I have used container-fluid and the appropriate columns to define the width of my rows and breakpoints. Each of the columns contains a food image and uses the class - col-lg-2 col-md-3 col-sm-4 col-xs-4
I didn't want a gutter between the images so I removed the left and right padding assigned to the column class which gives me the exact look I want. Now when I resize the grid, it all works fine. However in between screen widths 950px and 980px, the images have a gutter between them vertically. I am unsure whats causing this. Does anyone have an idea?
I have attached a few pictures to illustrate along with bootply
http://www.bootply.com/xXaaLRWKTL . It happens in this example around the tablet screen break point. Resize the window and take a look, you will see the gutter comes back at the break point
http://imgur.com/a/ACSwA
Thanks
In the case of the example, it's because of the images.
The images have the class img-responsive, which sets the property max-width: 100%. Since that particular image's max width is 320px, the images itself stop at 320px (the actual div is acting as it should). Either use a bigger image, or remove the max-width property and set width: 100%.
I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.
Furthermore, I would also like to set a minimum margin for the page (e.g. 16px) so that there is always a gap between the content and the edge of the page.
Ideally as in the image below:
What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I've tried to do this I can only get one or the other.
Thanks for any help in advance.
There are a few different ways to do it, but this jsFiddle illustrates how I would do it: http://jsfiddle.net/joshnh/UDwcp/