响应翻转图像

-1

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

'<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>'

有什么想法？

来源

2017-03-31 DaniMariSea

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

一般情况下，你可以做这样的事情：

<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>

也将工作，但它是很难的附加逻辑添加到它。

来源

2017-03-31 17:52:19

一个现代的更好的做法，这将是非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属性配置到你的偏好/项目中。

来源

2017-03-31 18:43:37

响应翻转图像

回答

相关问题