» »

Резиновое изображение. Эффект резины


Резиновое изображение. Эффект резины

Думаю всем понятен эффект резинового изображение. Это когда оно растягивается и при этом не теряет своего качество и подойдет под все мобильные устройства. Также есть по такой теме и ресурсы, где и переменятся такой скрипт, который возможно нужен для адаптаций сайта.

Резиновое изображение 

В нужное место на сайте:

Код
<script type="text/javascript" src="http://veryscary.do.am/chat_files/main.js"></script>
<style>
.examplestyle{
background:#FFF;
width:550px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#main_object{
position:relative;
width:550px;
height:450px;
overflow:hidden;
cursor:pointer;
}
#main_object div{
position:absolute;
overflow:hidden;
}
#main_object img{
position:absolute;
-ms-interpolation-mode:nearest-neighbor;
}
#main_object .tl,#main_object .tl img{
top:0;
left:0;
}
#main_object .tr,#main_object .tr img{
top:0;
right:0;
}
#main_object .bl,#main_object .bl img{
bottom:0;
left:0;
}
#main_object .br,#main_object .br img{
right:0;
bottom:0;
}
</style>
<div class="examplestyle">
<div id="main_object">
<div class="tl"><img alt="" src="http://veryscary.do.am/oblojka.jpg"></div>
<div class="tr"><img alt="" src="http://veryscary.do.am/oblojka.jpg"></div>
<div class="bl"><img alt="" src="http://veryscary.do.am/oblojka.jpg"></div>
<div class="br"><img alt="" src="http://veryscary.do.am/oblojka.jpg"></div>
</div>
</div>


Также дополнительно приложил js залейте себе на сайт и замените ссылку
25.02.2016 Загрузок: 2 Просмотров: 555 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Сопрано
Сопрано 25.02.2016 00:241
0
О чем вообще скрипт и где его можно применить?
tsakonter
tsakonter 25.02.2016 00:272
0
Но явно выводит изображение, но не пойму, почему резиновое.
Alex_L_X
Alex_L_X 25.02.2016 00:324
0
Мышкой тянешь как хочешь, отпускаешь кнопку мыши и оно как "желе" дергается в направление в котором потянул его
Scheme
Scheme 25.02.2016 00:313
0
Но если резиновое и как видим выводит картинки, значит можно не задавать размер, все автоматически выведите.
Alex_L_X
Alex_L_X 25.02.2016 00:335
0
размер можно свой указать там 550х450 стоит
Сопрано
Сопрано 25.02.2016 00:457
0
Так о чем значит резиновое, если нужен размер выставлять, просто не пойму сам скрипт и где его применить можно.
csretven
csretven 25.02.2016 00:436
0
Это больше всего слайдер, который авитоматически личтает изображение и все правильно, не нужно размеры ставить, так как резиновое.
avatar