Question

我正在尝试在图像上使用“宝丽来”效果，但我希望在桌面屏幕上使用全尺寸（大约200像素），但是当它在一个屏幕上观看时，它具有缩放比例，例如50％移动设备。

要实现这一点，我想我必须使用@media查询吗？我从未使用过媒体查询，所以我需要一些帮助。如果没有，任何人都可以指出我可以在没有javascript的情况下完成这项工作的方法吗？

我有以下代码：

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>

和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);
}

为简化起见，我正在使用“实时”预览添加指向我的公共保管箱文件夹的链接：https://dl.dropbox.com/u/3543277/www/index.html

Answer 1

要使图像缩放，您应将其CSS设置为：

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

这将允许它基于其父容器

进行弯曲

Answer 2

像这样创建元标记：http://www.seabreezecomputers.com/tips/mobile-css.htm

<link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

基于“每个人都提出这个问题”，我会预测您关于如何扩展移动设备网页的下一个问题：http://www.onlywebpro.com/2011/08/30/viewport-meta-tag-for-mobile-devices/

如何根据屏幕调整图像大小？

2 个答案: