I have a layout with multiple images, both portrait and landscape. I would like to make each image take up as much space as possible within the browser window, whilst remaining entirely visible.
Is there a simple way to do this? I've tried searching but everything coming up is for making a single full screen DIV or image, rather than the multiple images I'd like to use.
You can use the background-size property, which has a value cover, that does exactly this. For older IE browsers which don't support this, a jQuery CSS hooks fix has been made available.
You just have to layout your DIVs using proportional CSS width values, and then assign each one a covering background image.
I think perhaps you are looking for something like this: http://masonry.desandro.com/demos/images.html
Related
On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.
I want to display these images in a gallery of neat, uniformly sized, square thumbnails.
How can I do thus using only CSS?
I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.
I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).
You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.
That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle
EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)
I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.
My content wrapper will be centered in the body. the problem i have is that i have a certain div that will be partially reaching into the body and out of the wrapper using z-index. this works fine when using a certain solution. if an user is maximizing its desktop solution the frame of the content wrapper wont be visible anymore. even then the certain div is no more visible. so is there a way to limit the max. zoom?
here is an example: link
when you will zoom in you can see that the red div is from a certain point no more visible. this i would like to avoid if possible. thanks a lot.
Various browsers allow you to define viewport metatags that define the allowable zoom limits (for example Web Kit-based browsers). If you know what your target browsers are, you may want to investigate this.
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.
I try to create a variable width website, but i have a problem with the images. I want to site to have bigger images and fonts on wider monitors, and smaller for normal ones. The solution i thought about was using percent, but the images (For the buttons, background and header) look kind of bad when they are resized. Is there another solution for resizing images and content dependeing on browser width?
Thank you
First thing to do is to check whether you really need those images. I haven'y seen them, so I assume you need them badly.
But you don't actually need any javascript to do that.
Depending on the audience you're targetting and the time you've got to build your website, you can try this to use CSS media queries to determine the width of the user's display. (You can learn more here: http://www.alistapart.com/articles/responsive-web-design/)
You can check the target display resolution with simple CSS conditional statements. If you know what kind of display types are the most popular among your prospective guests, you can prepare 3-4 different sets of various sized images for various users.
This way you can deliver different sizes of images to different user resolutions.
But first make 100% you need the images and you cand achieve the same effect with CSS.
You probably need a mixture of JavaScript and CSS; use JavaScript to determine the dimension of the screen, and use it to calculate the ratio for your re-sizing, and change the CSS property of the objects.
You may also want to use sizes in em instead of pixels when doing the style sheets.
When resizing images, you also have to keep in mind the aspect ratio, so you cannot just apply a percentage value to both the width and height.
I have a table which border I want to have a sort of zig-zag shape. I want the table to have an automatic size; resizing depending on how big the browser is. But rrathe than just having an image that gets stretched I want a seamless image that gets repeat instead.
I found out this can be done with CSS3's Border-image but by looking and Browser Statistics I can see than only about half of all the viewers will be able to see it since no version of IE does yet support it.
So I'm looking for an alternate method. What would be the best way of doing it?
Thanks in advance!
How about making it a background repeatable image instead? Will the table be resizable horizontally or vertically?