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
Related
I understand that currently we are supposed to use width and height attributes on <img> elements again, mostly to avoid or minimize layout shift. And this works OK when I have images with the same set dimensions across all screen sizes.
But what do I do in the following situations:
fluid width/height, possibly simply 100%, so full container width, and the container changes its dimensions based on screen size basic responsiveness)
same, but with image itself having set dimensions but differing on breakpoints?
I tried searching for answers online, obviously, but in most cases I can only find articles convincing me how important it is to use these attributes, or, that this is a hassle now, but will be much easier once aspect-ratio is introduced and implemented in the browsers. So, not very useful so far.
In other words, let's say I have an image that is:
100% wide, height: auto on mobile breakpoint,
20rem x 12rem for medium resolutions,
40rem x 24rem for large resolutions,
60rem x 36rem for xlarge ones.
What would I put in the width="X" height="X" attributes?
Ok, so after quite extensive research and experimentation I've found out that, in truth, it doesn't really matter as long as the aspect ratio is preserved. So the best bet would probably be to use image's original dimensions.
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.
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'm trying to make a page that can scale down to support small browsers, but take advantage of the majority of browser sizes that most visitors are using.
I have a background image that is bigger than 1024x728, but the most important parts of the image are contained within 1024x728... It's like a magazine's bleed - there's extra image there if its needed (and it looks better if fully expanded) but it's not necessary.
I have included an example to illustrate what I mean:
http://tinypic.com/r/24l5she/7
The "background image" is the entire red box in the larger browser window, and there's a repeating texture it sits within (the blue). The "white box with red arrows" is the "minimum size" I want to accept. What I am trying to do, depending on the size of the user's browser, is cut out parts of the image until the browser reaches some specific minimum size.
Can this be done within a framework like 960.gs?
Really looking forward to your responses!
Cheers,
Put your page in a fixed-width wrapper div, then add a centered background-image to the body tag.
With CSS3's background-size property, you can force the image to stay a constant size. Then it's just a matter of a no-repeat center center bit in your background declaration.
div {
background: url('yourpic.jpg') no-repeat center center;
background-size: 1024px 768px
}
You didn't really want to support IE<=8, did you?
Not an answer but more of a food for thought...
Seeing as your background image is so large, you may want to just remove it from mobile devices. While most of them can handle it, it's just extra data that needs to be transferred and most mobile carriers have strict data limits.
Like I said, just something to consider. :)
I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).
What I'd like to find are some magical HTML markup and CSS rules that will
Allow the images to be included in normal <img> elements
Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
Not require JavaScript or specific knowledge of each image's actual dimensions
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.
But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
http://overloaded.org/tmp/imgtest/
http://overloaded.org/tmp/imgtest/imgtest.zip
I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.
Thanks for any help or pointers you can provide!
Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.
Live Demo
contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.
cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
Possible, probably.
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
Here's a tut on using ImageMagick to do thumbnails.
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)