Question

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

这是我的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>

Answer 1

e.g。的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;}

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

1 个答案: