如何根据浏览器大小缩放翻转图像答案

【问题标题】：How to scale rollover image in relation to browser size如何根据浏览器大小缩放翻转图像
【发布时间】：2014-07-02 21:58:35
【问题描述】：

我目前正在使用仅使用三个翻转图像的网页。其中一个翻转是可点击的。当用户将鼠标放在图像上时，它会翻转以显示第二个带有文本的图像（不是文本框）。我将网页设置为根据网页宽度进行自我调整，但我希望图像也可以缩放。

这是我的 CSS

<style type="text/css">

function myFunction()
{
var w=window.outerWidth;
var h=window.outerHeight;
var txt="Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML=txt;
}


  html{background: url(http://i34.photobucket.com/albums/d141/truevintage101/d_zps8e1f8be8.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }



.brianne1{
    width:750px;
    height:1161px;
    display:block;
    margin-left:25%;
    position:absolute;
    margin-top:0px;
}

.brianne2{
    height:1161px;
    with:750px;
    display:block;
    margin-left:50%;
    position:absolute;
    margin-top:0px;
}

.brianne3{
    height:1127px;
    display:block;
    width:750px;
    margin-left:75%;
    position:absolute;
    margin-top:0px;
}



.center{
    font-size:120px;
    font-family:'all things pink';
margin-left:50%;
    width:100%;
}



</style>

我的 HTML

<body onresize="myFunction()">

<div class="center">
    <p>Brianne Fratt</p>
</div>

<div class=brianne1 id=block> 
 <img src="http://i34.photobucket.com/albums/d141/truevintage101/Bri2_zps2126876b.png" onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/BriTemp1_zps7cd3a4b1.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/Bri2_zps2126876b.png'" /></a>
     </div>


<div class=brianne2 id=block> 
 <a href="http://falserealityfilms.tumblr.com/AnyQuestions"><img src="http://i34.photobucket.com/albums/d141/truevintage101/Bri33_zpsca27796d.png" onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/BriTemp22_zpsa6accf75.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/Bri33_zpsca27796d.png'" /></a>
     </div>


<div class=brianne3 id=block> 
<img src="http://i34.photobucket.com/albums/d141/truevintage101/Bri1_zps044b80d6.png" onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/BriTemp3_zps919e12be.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/Bri1_zps044b80d6.png'" />
     </div>

【问题讨论】：

你的代码有点乱。建议您在 javascript 中进行图像交换，然后将 css 缩放为 img{} 标签
css 不是背景图片时更容易控制

标签： html css resize scale rollover

【解决方案1】：

例如Javascript

<script language="javascript">
        function MouseRollover(MyImg) {
        IMyImg.src = "http://i34.photobucket.com/albums/d141/truevintage101/Bri2_zps2126876b.png";
    }
        function MouseOut(MyImg) {
        MyImg.src =   "http://i34.photobucket.com/albums/d141/truevintage101/BriTemp1_zps7cd3a4b1.png";
    }
</script>

在体内

<div>

<img src = "http://i34.photobucket.com/albums/d141/truevintage101/Bri2_zps2126876b.png"
onMouseOver="MouseRollover(this)" onMouseOut-="MouseOut(this)"

</div>

css

img{max-width:100%;
    height:auto;}

【讨论】：