Question

这就是我要做的事情。我的照片比例为7:10（700px×1000px）。我希望图片的前50％出现在我的网站上，但是当悬停在底部上方时会向上滑动。我使用普通像素进行此操作，但我无法让它以响应主题网站的百分比工作。我已将图像设置为width = 100％，图像本身会响应，但容器保持静态。我想我需要让容器响应，但我不确定如何做到这一点...

我尝试了宽度= 100％，但它并没有影响到css ...我很高兴这个，所以请原谅我，如果这是非常基本的东西......非常感谢！

 <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />

<title></title>

<!-- Stylesheets -->
<style>
.pictureContainer {
    height: 500px;
    width: 700px;
    overflow: hidden;
}

.pictureContainer img {
    position: relative;
    top: 0px;
}
.pictureContainer img:hover {
    top: -500px;
}

.pictureContainer img {
    position: relative;
    top: 0px;

    transition: top 1s ease-in-out;
}
.pictureContainer img:hover {
    top: -500px;
}
</style>
</head>

<body>

<div class="pictureContainer">
<a href="MyWebsiteLink">
<img src="MyImageLink" /></a>
</div>

</body>
</html>

Answer 1

我认为你的问题意味着图像的一半总是可见的......并且它会缩放以始终填充屏幕的宽度。

因此实现保持70％高宽比的内容需要http://fluidsquares.com/想出的一些帮助（使用height:0和内部padding-bottom元素另一个内部position:absolute元素，为您提供完美的可扩展比率）

我在这里创建了一个有效的jsFiddle http://jsfiddle.net/Q58xL/1/

使用样式标记中的百分比来响应悬停/幻灯片图像

1 个答案: