I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
It is fairly simple with the figure and figcaption tags, and I was able to recreate the effect without any superfluous markup.
The really essential CSS is:
figure{height:155px; width:125px; overflow:hidden;}
and by applying position:relative; to figure as well, and using some relative positioning on the figcaption, you are able to get a neat Polaroid effect.
Demo
Because you suggested them, I'm sure you know how figure and figcaption are supported across browsers.
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example
Related
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
Why are the images for the cards component being used as a background instead of the image to fill up the media portion of the card? cant we just use the image tag instead?
I am trying to use the MDL framework to make a tumblr template
but having trouble implementing the card component for the images posts since tumblr uses image tags
please explain why MDL is using images as backgrounds for the card component
Nothing is really holding you back from using the img tag. See this as an example.
However using images as background of divs has some advantages:
Right clicking on the image does not allow you to download the image
You have more flexibility in terms of responsiveness (e.g. by using background-size: cover to fill the div). UPDATE: even though you can set 100% on width/height to adapt the image, cover keeps the aspect ratio and in general provides better results.
Since your image is just a background you don't need to set its position to absolute to let other elements inside the div be positioned over the image (as it is the case in all of MDL examples)
Here is the website I'm working on:
I can get the image not to stretch by removing height: 481px; but then I lose the caption and squares below the image and it moves around if the images are different heights. I've tried messing around with positioning, but I haven't found a solution.
There are several ways you can solve this.
A cleaner solution, as #Sven pointed out, would be to use the tag <div> instead of <img> and use the images as background for the div.
Or,
you can use the CCS clip property to crop all your images to the same size, while maintaining their original proportions:
img {clip:rect(0px,60px,200px,0px)}
(check this link for documentation on clip: http://www.w3schools.com/cssref/pr_pos_clip.asp)
The fastest solution for you at this point however (the one that needs less changes on your actual code) might be to use the absolute positioning, only, instead applying it to the div .text-box apply it to his parent .slider-cont-wrapper.:
.slider-cont-wrapper {position:absolute; top:100px; right:100px}
(change top: and right: to measures that suit your layout)
Well, if images don't have the same proportion, no matter what you do, you'll never get different image sizes fit perfectly in the same spot. so, what do you want?
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)