I am looking to create a product feed per se, that has many images that are all aligned in rows and columns , so far if i force the max height to something small, and set object-fit: contain then it looks alright, however, if i make the screen size smaller it messes up and the individual divs become different sizes again, which leads to some being taller than others and eventually a lack of rows, or at least a lack of aligned rows.
i would put the maximum number of items in a row (large screen size, so 8) in a row but i am also unsure of how many rows i would need on a page because that is dynamic, i could then set a row to say 10% height.
also a problem is when landscape or portrait pictures sit next to each other due to the current nature of the site the landscape photos are the right size to view but are obviously shorter than average.
i guess what i am asking is there an easy way using only bootstrap/twig/php that does not require the server to download the image first which allows me to also set the height to say 200px when sm 400px when lg etc, but instead of pixels it maybe be 1 "set row height" for that viewport size...if i had only one viewport size this would've been done ages ago...
HTML/TWIG
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2 productlistcontainer">
<a href="../product?cat={{result.category_id}}&id={{result.product_id}}">
<img src={{result.image_url}} alt="product_image" class="productimages">
</a>
</div>
CSS
.productimages {
min-height:100%;
min-width:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
}
thanks, any input is much appreciated,
-ALLW
SOLVED: i had my divs set strange, but after i sorted that i used width:100% height:100% background-cover:contain
Related
I'm trying to create a responsive gallery with images of various dimensions. The idea is to have 5 square divs of the same size on full screen, each image is centered both horizontally and vertically, scaled to fit with some padding (proportional, according to window size). Spacing among divs is the same both horizontal and vertical (again proportional (%) based on window size - to have a nice tidy view. There is min and max size of divs so when min size of divs in one row is reached they are reordered, meaning the last one on row 1 will move to row 2 etc, keeping the fixed (proportional) spacing.
Is this even possible with just CSS?
The closest example I could find is this:
<code>http://codepen.io/anon/pen/QGwwEB</code> but I was not able to turn it to what I need.
if you are using bootstrap classes then write
<img src="" alt="image" class="img-responsive">
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
The question I have is pretty simple.
I have a div with responsive images. on sm the divs are full width like:
<div class="row">
<div class="col-md-4">
<img src="/img/picture1.jpg" class="img-responsive">
</div>
<div class="col-md-4">
<img src="/img/picture2.jpg" class="img-responsive">
</div>
<div class="col-md-4">
<img src="/img/picture3.jpg" class="img-responsive">
</div>
</div>
Bootply
What width in px should I use for the pictures, i want the highest quality for the picture thats possible.
Im not overruling any bootstrap css so its for default bootstrap 3.
Also i know the larger the image resolution the better the quality, but a 4k image would be useless on a div sm in bootstrap and is a waste of resources.
Assuming that you use fixed containers and an untasted bootstrap CSS the container width for small devices is 750px (720px + grid-gutter-width).
That means the widest possible column/image can be 720px (container width - gutter). So if you want to guarantee the images are displayed in best quality they must be at least 720px wide and 1440px to cover retina screens.
There is not a maximum browser width so the short answer is "as big as you can" (but take into account that the bigger the image is, the longer it takes to load).
What I would to is to do it in a way similar to Bootstrap. Bootstrap sizes go from extra-small to large and it considers large containers (when not fluid) to be 1170px width, so it has to be at least a third of that, 390px (330px if we remove the gutter space).
Moreover, it is shown at full width at small screens which bootstrap consider to have 750px (720px if we remove the gutter space) so the minimum updates to 720px.
But, if you want your web to look great on retina devices or similar, you should use images twice as big, so the result would be 1440px (but you should use those big ones just in that kind of devices)
I would look for a compromising solution between size and weight.
The col-md-4 class forces bootstrap to split the three horizontal images into three columns when the browser width is 768 pixels or less. The gutter width is 15px so
the best image width is 738px.
This would work for screen widths up to 3*768 = 2304px.
Most screens will be covered under this (see below)
https://www.w3schools.com/browsers/browsers_display.asp
For larger widths you should test depending on your requirements...
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 have 4 images (all the same width and all the same height) that I want displayed side by side on the very top of the webpage, but the trick is that is needs to take up the entire browsers width $(window).width() in jQuery.
My questions are:
First, is this possible?
If so:
What is the best way to do this for all browser widths (or most of
them)?
Should it be 1 image instead of 4?
What are the advantages/disadvantages of either way (1 image vs. 4 images, and vice versa)?
Do I have to use jQuery or another language to calculate the screen's width and load up different size images for each different size screen width? Or can this be done with CSS natively?
What width size is recommended to use on, either, all 4 images, or if I make these images 1 image, what width would be recommended than?
NOTES: I don't want to stretch the images wider, cause that will cause it to look distorted, but if I have big images and size them down, than it affects the load of the page (dropping performance). How to do this so that I don't have to make any sacrifices in look and/or performance? If possible, I would also like it to look right in phones... but that's not a huge priority, but would be nice, if possible.
The images need to be set to 50% the width of the parent element. In my example that parent element is the body:
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
Css:
.half-width-img{
width:25%;
height:auto;
float:left;
}
html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}
http://jsfiddle.net/j7L4h/2/
I would recommend, if possible, making the 4 images into 1 image if you're concerned with scalability. You can also then specify the dimensions of the image, which helps load time since the browser doesn't have to figure out the dimensions of each image (which is what it would need to do if you gave it percentages for width size). If this is for some kind of background, perhaps, edit the last image in such a way that when the browser expands to a greater width than the image dimension, it repeats forever (e.g. background-repeat in CSS)...