响应式图像悬停 - CSS/JQuery答案

【问题标题】：Responsive Image Hover - CSS/JQuery响应式图像悬停 - CSS/JQuery
【发布时间】：2013-12-03 14:48:59
【问题描述】：

我按照本教程 (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) 构建了一个我想在我的网站上使用的图像悬停插件。

我唯一的问题是我希望它能够响应式地工作，根据我的 960gs 缩放图像。

这是我目前掌握的小提琴：http://jsfiddle.net/Ak94R/6/

.viewport {
    float: left;
    height: 360px;
    margin: 0 9px 9px 0;
    overflow: hidden;
    position: relative;
    width: 360px;

}

我不想将该图像从 730 像素/730 像素缩小到 360 像素/360 像素，而是将其从 200% 缩小到 100%。我还需要将主剪辑 div (.viewport) 的大小设置为 100%。任何帮助将不胜感激！

【问题讨论】：

这不能完全由 CSS 完成吗？说实话，不确定你是否需要 jQuery。
transform: scale(1.5); 和 -webkit-、-moz-、-o- 和 -ms- 用于其他浏览器。
问题是，还是需要裁剪到一个div里面。但我需要那个 div 来保持与图像相同的大小比例。 Josh Powell - 您愿意提供更详细的“transform:scale(1.5);”示例吗？你在建议？

标签： jquery css hover zooming scale

【解决方案1】：

好的，我刚刚花了几分钟时间注册了CSS only solution。做同样的事情，不需要 JS。完全响应，因为它适用于百分比。 HTML 如下所示：

<div class="viewport_css">
    // I have to use a dummy image to force dimensions
    <img class="dummy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
    <a class="imgwrapper" href="#">
        <img src="http://www.lorempixel.com/730/730/" alt="More Info" />
    </a>
</div>

CSS 部分：

.viewport_css {
    position: relative;
    max-width: 360px;
    height: auto;
    overflow: hidden;
}

// make sure viewport_css always is square shaped
.viewport_css .dummy {
    width: 100%;
    height: auto;
    display: block;
}

.viewport_css a,
.viewport_css a:hover:before,
.viewport_css a:hover:after {
    position: absolute;
    left: 0;
    right: 0;
}
.viewport_css a,
.viewport_css a:hover:after {
    top: 0;
    bottom: 0;
}

.viewport_css a:hover:after {
    content: '';
    display: block;
    z-index: 100;
    background-color: rgba(255, 0, 0, .5);    
}

.viewport_css a:hover:before {
    content: 'View';
    color: #fff;
    top: 50%;
    text-align: center;
    z-index: 200;
    margin-top: -0.5em;
}

.viewport_css .imgwrapper {
    width: 200%;
    height: 200%;
    margin-left: -50%;
    margin-top: -50%;
    transition: all 1s ease-in;  
}

.viewport_css .imgwrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.viewport_css .imgwrapper:hover {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
}

【讨论】：

这非常接近！我仍然遇到的唯一问题是：.viewport_css {width: 360px; height: 360px;} 我怎样才能使这个百分比为基础呢？我试过 max-width:360px;宽度：100%；它可以工作，但高度仍然不正确。
您需要某种容器来设置尺寸。您可以使用具有可见性的虚拟图像执行某些操作：隐藏在其上。在这种情况下，您只需要 viewport_css 元素上的宽度（并且您提到的 max-width + width 应该可以解决问题）。
我不太明白你对虚拟图像的意思。你能扩展吗？
我已经更新了小提琴和上面的代码示例。向源添加了 base64 编码的透明 1x1 GIF 图像。如果有人知道更好的替代方案而不污染 DOM，请告诉我:)

【解决方案2】：

我在每个断点使用媒体查询更改了background-size: 70px 80px; - 这解决了我的问题

【讨论】：