Question

我一直在寻找答案，无法找到符合我需求的答案。所以我创建了一个小提琴来解释我想要实现的目标：http://jsfiddle.net/Fran6/jbo5pfs4/3/

HTML：

<div class="col1">
<img></img>
<h1><a href="#">Title 1</a></h1>
</div>
<div class="col2">
<div class="box1"><img></img>
    <h1><a href="#">Title 2</a></h1>
</div>
<div class="box2"><img></img>
<h1><a href="#">Title 3</a></h1>
</div>
<div class="box3"><img></img>
<h1><a href="#">Title 4</a></h1>
</div>
</div>

我在页面上放置了容器。他们有图像，我想让他们不拉伸。我实际上想要与背景图像相同的效果：封面。这是我的第一个问题。

然后，当我将鼠标悬停在图像上时，我想通过标题实现的链接对图像进行缩放效果。

我可以分开但不能一起完成这些事情。此外，我开始使用背景图像而不是HTML，但无法进行缩放效果。

所以，如果有人能帮助我解决我的问题，那将是非常好的！： - ）

谢谢！

Answer 1

我可以完成背景图片：封面。创建一个ID为＆＃39;覆盖＆＃39;的html标记。像这样...

<div id="cover">
    <!-- content -->
</div>

然后，您需要在CSS中执行以下操作。

#cover {
    padding: 0, 0, 0, 0;
    background: url(http://placehold.it/300x150) top left no-repeat;
    background-size: cover;
    height: 300px;
}

我想要做缩放效果，你可以使用：悬停虽然我不是100％肯定。希望这会有所帮助。

调整响应图像大小而不在图像链接上进行拉伸+缩放效果

1 个答案: