响应式翻转图像[关闭]答案

【问题标题】：Responsive rollover image [closed]响应式翻转图像[关闭]
【发布时间】：2017-04-01 02:43:37
【问题描述】：

我正在尝试制作一个响应浏览器宽度和高度的翻转图像。这是当前代码：

'<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a>'

有什么想法吗？

【问题讨论】：

欢迎来到 stackoverflow.com！当人们经过深思熟虑并展示研究证据和展示代码时，我们会尽力回答人们的问题。请阅读以下文档stackoverflow.com/help/how-to-ask，

标签： responsive rollover

【解决方案1】：

一般来说，你可以这样做：

<a href="google.com"><img id="myImage" src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a>
<script>
  var w = window.innerWidth;
  document.getElementById("myImage").width = w;
</script>

这会将图像宽度调整为浏览器窗口的内部宽度。如果要按高度进行调整，请改用 window.innerHeight 属性。如果您想通过与图像相关的两者中的最小者来调整图像，您可以编写一些逻辑。

或者，如果你想内联：

<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" width="window.innerWidth"/></a>

也可以，但很难为其添加额外的逻辑。

【讨论】：

【解决方案2】：

现代更好的做法是非 JS / 纯 CSS。有几种方法可以实现这一点，这里有一个：

<a href="#"><div class="myimg"></div></a>

   .myimg { 
    width:80%;
    height:200px;
    background: url(https://s-media-cache-ak0.pinimg.com/736x/bc/4e/38/bc4e386f24997b6f8c4c1f8ce96a7cef.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.myimg:hover { 
    background: url(http://img00.deviantart.net/4ec1/i/2013/017/5/b/blue_eyed_huskey_by_ashleysmithphoto-d5rsvt2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Live Demo。显然，您可以根据自己的喜好/项目配置上述 CSS 属性。

【讨论】：