Блог

Главная - Вопросы по программированию - Как масштабировать изображение при переносе в зависимости от размера браузера

Как масштабировать изображение при переносе в зависимости от размера браузера

#html #css #resize #scale #rollover

#HTML #css #изменение размера #масштабировать #перенос

Вопрос:

В настоящее время я работаю над веб-страницей, используя только три изображения при переносе. Один из переходов доступен для просмотра. Когда пользователь наводит курсор мыши на изображение, при переносе открывается второе изображение, на котором есть текст (не текстовое поле). У меня настроена моя веб-страница на настройку в соответствии с шириной веб-страницы, но я хочу, чтобы изображения также масштабировались.

Вот мой 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>

Комментарии:

1. ваш код немного неаккуратен. предлагаю вам выполнить замену изображения в javascript, а затем использовать css для масштабирования в теге img{}

2. css легче контролировать, когда это не фоновое изображение

Ответ №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;}