Question

I’m trying to use a “polaroid” effect on an image but I would like to have it full size (about 200px) when in a desktop screen, but have it scale, for example 50%, when viewed on a mobile device.

To achieve this, I think I have to use @media queries right? I’ve never used media queries so I’ll need some help. If not, can anyone point me to a method in which I can make this work, without javascript?

I have the following code:

HTML:

<section id="splash">
            <header>Celso Santos</header>
            <div class="container">
                <div id="polaroid">
                    <figure>
                        <img src="img/zedblade.jpg" alt="Celso Santos" />
                        <figcaption>Geek</figcaption>
                    </figure>
                </div>
            </div>
        </section>

and the CSS:

    /***Position the figures containing the images and captions***/
#polaroid figure {
    /*float: left;*/ /*places the images in a horizontal line*/
    position: relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
    width: 178px; /*width of the images*/
    /*margin: 0 auto; /*space between the images*/
}

#polaroid figure {
    padding: 6px 8px 10px 8px; /*size of the frame*/
    /*give the frame's background colour a gradient*/
    background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
    background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
    background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
    background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
    background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
    background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
    /*give the Polaroids a small drop shadow*/
    -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
    box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
}

#polaroid figcaption {
    text-align: center;
    font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
    font-size:1.3em;
    color: #454f40;
    letter-spacing: 0.09em;
}

figure:before { /*see the support section below to more info on using the :before psuedo element*/
    content: '';
    display: block;
    position: absolute;
    left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
    top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
    width: 75px; /*width of the tape*/
    height: 25px; /*height of the tape*/
    background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
    /*rotate the tape 12 degrees anti-clockwise*/
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
}

/**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
figure:nth-child(even):before {
    left:150px;
    top: -15px;
    width: 55px;
    height: 25px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
}

For simplification, I’m adding a link to my public dropbox folder with a “live” preview: https://dl.dropbox.com/u/3543277/www/index.html

Answer 1

To have your image scale, you should set its CSS to this:

img{
   max-width: 100%;
   height: auto;
}

This will allow it to flex based on its parent container