I want to use the flexbox and the responsive image (the image with scrset and sizes). But the result seems horrible. The images have different height even if I used flex-grow to pull aligned, because the browser will load the different image with different sizes. I want the height of all images to be the same.
I found out sizes of images is hard to set if I use flexbox, it's quit unpredictable. Is there any way to solve this?
Here is the JSfiddle (Please resize the result window larger and the I used inline css for flex-grow)
Set the image height property to:
height:100%;
And if you want your all images to be the same size set the same value for flex-grow.
flex-grow:1;
Related
I have images inside an html article that is set to columns using a fixed column-width attribute on containing div.
I've added srcset for reponsive images which works fine except it loads the largest image based on the width of the containing div not a smaller image based on the width of the columns.
In some cases the article is displayed without columns so I was hoping the same image srcset can cater for both situations. Is there any way to make srcset select the smaller sized image when its showing the content in fixed with columns?
For lack of responses, I came up with wrapping div around the images so the div scales to the column and srcset picks image is selected based on the wrapper rather than the full div. If anyone has a better solution please share.
Update: Doesn't work as srcset looks at the viewport not the wrapping div. One way to solve this might be to just use 30vw in sizes if its in multicolumn or calculate the number of columns using the width of containing div and use that value as the vw amount in sizes.
So I'm testing CSS's grid abilities and one of the things I can't figure out is zooming levels from browsers and the behavior of images within them.
e.g. If I change the viewport it's all fine. The grid and it's images scales perfectly but there are users who use ctrl+- or cmd+-.
If this is used the image is scaled like it should but the grid doesn't scale like I thought it would.
I created a basic grid containing 4 columns and no rows. I don't want to have the width full screen so I added a margin on the container holding the grid of 25%.
The grid is place within the center. Here is a Fiddle.
https://jsfiddle.net/kagprzae/
Can anyone see where I missed a turn?
---- SEMI-SOLVED IT----
So The trick is to use absolute pixels. That way you can use ctrl/cmd+-
The downside is that the grid isn't responsive anymore so you have to use #media queries to change layout...
I'm not sure what I believe would be the best approach to do this.
---- COMPLETE SOLUTION NO JS ----
So after some (a lot) of testing and thinking I came up with the following solution.
Give the .container a width (in my case I could) and calculate your grid according to a 100% width.
You can margin:0 auto; to center the div.
See this fiddle
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
The logic of placing the images should be like this:
Say if image is smaller than the container, scale it up to the maximum size such that the aspect ratio is maintained, and put it at the center of container.
If image is bigger, scale it down while maintaining the aspect ratio.
Some examples:
Say our container is 150x150, and we have an image sized 100x50. In this case the image should be scaled up to 150x75.
If we have an image sized 100x300, the image should be scaled down to 50x150.
While this can be easily done with javascript, I'd like to avoid that if possible.
I'm wondering if there's any way to accomplish this with CSS alone. I can live with a CSS3 only solution, or even with webkit/firefox specific directives, as long as it works on latest versions of Chrome, Firefox and Safari (I will use a fallback for IE if there's no choice).
Edit: I know about max-height and max-width of course. The issue is that if I set both max-height and max-width to 150, images won't be scaled up if needed.
Don't use an <img>. Instead, use a background-image style:
background: transparent url('path/to/image.png') no-repeat scroll center center;
background-size: contain;
The background-size does the magic, scaling the image up or down so that it snugly fits inside the container.
Check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/3/
Though this only works if you can apply classes to individual images
EDIT:
if you can use background images, check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/4/
The "image only with added classes" works on the top, and the using background images works on the bottom.
I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).
With Fluid Layouts, can an image be made completely fluid? For example:
img { max-width:100%; }
Does this mean it will adjust/fit to any extent or window size?
Also can this be applied to background images as well ?
Does this property have any limitations in terms of browser implementation or anything ?
The snippet you provide says that the maximum width for the image is 100%. This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.
It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.
It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.
Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width
For backgrounds this works a little different, you can use background-size: x y; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size