I'm curious to know how you resolve the following problem.
Using Bootstrap 3 with 24 columns and grid-gutter to 30px.
In wide display, I use col-7 for the sidebar left and col-17 for the main content. The problem is bootstrap is calculating the widths with percentage. So I have 339.5px (29.16667%) for the sidebar, and 824.484px (70.83333%) for the content.
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>
Now, I use some scripts like lazysizes and lazyaspectratio to lazy-load my pictures and have the image container kept the same dimensions even if the image is not already loaded. With lazyaspectratio, the width must be 100% to recalculate the height to keep.
BUT... because there is a but... if my main content is 824.484px width, the picture is 824.484px width too, and picture quality is bad. Assuming my picture display must be 824px, the final picture display is shitty and I lost quality, even if the ratio is respected.
My question is : how to bypass this problem with img > width=100% ?
I saw on several threads that people "fix" the width of the row children, like this :
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}
It seems a good solution to keep img > width = 100% and have integer columns width, but with this solution, I must add lot of css rules to manage for multiples col-* and multiples media-queries...
And you ? how do you solve this kind of problem ? Because I think using img-responsive class with width=100% cause quality loss on percentage based width with Bootstrap 3... I'm sure that I'm not the only one to encounter this problem.
Thanks in advance for any suggestion.
Andrejs: You can customize bootstrap at: http://getbootstrap.com/customize/
titouille: You could create a Javascript that rounds the images widths down based on their classes or parents.
For each image element you read in the width of the col or parent and set it (rouded down to 1 px) as it's max-width
Related
I was checking my website speed at GTMetrix.com. On the Page Speed tab their was a recommendation to specify the image dimensions for images.
I am using a Bootstrap website.
The images on my site currently have the following html
<img class="img-responsive" src="the-path">
Their is a recommendation at GTMetrix that states that these images are missing width and/or height attributes.
I have always assumed that I should not put a specific width and height attribute on my img's when they have the img-responsive class.
Can you advise if width and height dimensions should be included on every img on a Bootstrap website even when the img-responsive class is being used.
The recommendation for setting a height and width exists so that the page does not have to be completely redrawn from scratch with a new layout once the image loads. If you pre-set the image size, then the layout remains the same after it loads, which is more efficient and also prevents somewhat jarring movement for the user as the page still loads.
When it comes to any design, if you expect a dynamic image size and your page can handle that, then there is nothing wrong with leaving the height/width unspecified. It's just an optimization technique. Value a functioning site over optimization.
try to use
http://www.w3schools.com/cssref/pr_dim_height.asp
using properties as: px change to vh(vertical height) or hh(horizontal height)...
example:
height: 80vh;
width: 40hh;
the size of 1 vh or hh depends on screnn size
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 just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this:
How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
I already read this link:
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.
If you are wanting to make the container not go wider than 1170px use
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.
Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.
html
<div class="container-fluid maxWidth"></div>
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.
Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.
I am building my web application on my laptop but when I navigate the page on my desktop pc the layout of the div are distorted.
I think the solution is giving percentage instead of absolute numbers like 240px to height and width of divs.
What do you think ?
Do you have another recommendations ?
Thanks in advance.
What I've done is :
<div style="height:240px;width:240px"></div>
What I think I have to do is :
<div style="height:100%;width:90%"></div>
When using relative sizing 'px' rather than absolute 'pt', the browser approximates the size which can alter your layout depending on user settings for 'zoom' or text-size' levels, browser version etc.
If you absolutely size the layout div using points (pt), you should not see changes based on browser, screen resolution etc.
Try
<div style="height:240pt;width:240pt"></div>
Great reference on relative vs absolute font management here
What do you mean by "distorted"? Did it get wrapped to the next line? That's the only way I can see there being any distortion.
If you want to keep fixed widths, you simply have to wrap something else around it that will enforce a width. For example, if you wanted 2 divs side-by-side:
<div style="width: 800px">
<div style="width: 300px; float: left;"></div>
<div style="width: 500px; float: left;"></div>
</div>
Since the outer element is 800px, and the inner elements don't exceed that, if the screen is smaller than 800px it will just have a horizontal scroll bar, and your divs should still happily be next to one another. Note that if you have anything like borders or padding set on any of the divs, that will add to the width (and height) of the element, so take that into account.