0

如何在位置绝对 div 内制作图像比例。该图像也是一个绝对图像。

这是代码：

HTML

<div id="home" class="panel">
    <div class="content">
        <p> Welcome! </p>
        <div id="plan" class="home-design">
            <p class="bottom-plan">Learning About the requirements</p>
            <img class="top-plan" src="plan.png" 
                                   style="max-width:100%; height:auto;" />
        </div>
    </div>
</div>

CSS

html,body {
    height:100%;
}

body {
    width:100%;
    color:#000;
    text-align:center;
}

.panel {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:600px;
    height:100%;
    border:1px solid #ddd;
}

.content {
    width:600px;
    top:0;
    position:absolute;
    margin:auto;
    height:100%;
}

.home-design {
    width:225px;
    height:200px;
    text-align:center;
    padding-left:64px;
    float:left;
}

.home-design p {
    font-weight:bold;
    margin-top:80px;
    font-size:10px;
}

#plan .top-plan {
    position:absolute;
    left:65px;
    top:30px;
    border:1px solid #ddd;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

#plan img.top-plan:hover {
    opacity:0;
    padding-top:50px;
}

文本在图像后面，当用户将鼠标悬停在图像上时，它会淡出并下降。我将图像设置为绝对图像，以便它可以放在文本之上。

这是图像。 在此处输入图像描述

这是一个 jsfiddle http://jsfiddle.net/endl3ss/guKS4/1/

编辑

调整窗口大小或显示器分辨率较小时。计划图像也应该调整大小。

4

1 回答 1

0

很难确切地知道你在追求什么，所以根据你真正想要的，你可以查看scale()transform-function：

#plan img.top-plan:hover {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
}

http://jsfiddle.net/guKS4/2/

或者，如果您想移动它，只需为该top值margin-top或什至为translateY()transform-function设置动画。

编辑

我从你的评论中意识到，你所说的那种缩放不会用这个scale()函数来解决。为了使内容框缩放到窗口的宽度，您需要删除静态宽度（例如width: 600px从包含框）

查看http://jsfiddle.net/guKS4/4我删除了宽度（以及其他一些不相关的 css）。这将使max-width图像上的 生效并且不会溢出视口。

于 2013-10-01T10:37:30.160 回答