ورود

View Full Version : ریسایز نشدن عکس ریسپانسیو



majid4
پنج شنبه 23 بهمن 1393, 12:42 عصر
سلام

من یه سایت با بوت استرپ طراحی کردم و داخلش از اسلایدر jssor استفاده کردم و اسلایدر رو خودم ریسپانسیو کردم


مشکلی که هست اینه که وقتی حاشیه مرورگر رو می گیرم و صفحه رو کوچیک می کنم همه ی عکس ها ریسایز می شه به جز اسلایدر

(یعنی بعد از کوچک کردن صفحه باید یک بار صفحه refresh شود تا عکس های اسلایدر به سایز های تعریف شده در تگ media@ تغییر پیدا کنن

این هم اسلایدر :

<div class="container-fluid" style="background-image: url('images/top_back.gif');">
<div class="container">
<div class="col-lg-12">
<style>
@media screen and (min-width: 1200px)
{
.main-slider{
background-image: url('images/slider_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 562px; width:1100px;
}
.main-slider-container{
position: relative;
width: 1065px;
height: 452px;
overflow: hidden;
margin-left: 13px;
}
.main-slider-container-img{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 1065px;
height: 452px;
overflow: hidden;
}
}
@media screen and (max-width: 1200px)
{
.main-slider{
background-image: url('images/slider_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px; width:910px;
}
.main-slider-container{
position: relative;
width: 880px;
height: 400px;
overflow: hidden;
margin-left: 11px;
}
.main-slider-container-img{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 880px;
height: 400px;
overflow: hidden;
}
}
@media screen and (max-width: 991px)
{
.main-slider{
background-image: url('images/slider_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 450px; width:630px;
}
.main-slider-container{
position: relative;
width: 607px;
height: 355px;
overflow: hidden;
margin-left: 9px;
}
.main-slider-container-img{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 607px;
height: 355px;
overflow: hidden;
}
}
@media screen and (max-width: 700px)
{
.main-slider{
background-image: url('images/slider_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 400px; width:570px;
}
.main-slider-container{
position: relative;
width: 545px;
height: 310px;
overflow: hidden;
margin-left: 9px;
}
.main-slider-container-img{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 545px;
height: 310px;
overflow: hidden;
}
}
@media screen and (max-width: 640px)
{
.main-slider{
background-image: url('images/slider_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 300px; width:500px;
}
.main-slider-container{
position: relative;
width: 470px;
height: 225px;
overflow: hidden;
margin-left: 11px;
}
.main-slider-container-img{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 470px;
height: 225px;
overflow: hidden;
}
}
@media screen and (max-width: 570px)
{
.main-slider{
display: none;
}
}
</style>
<div class="main-slider">&nbsp;
<div id="slider1_container" class="main-slider-container">

<!-- Slides Container -->
<div data-u="slides" class="main-slider-container-img">
<div><img data-u="image" src="img/a.jpg" /></div>
<div><img data-u="image" src="img/b.jpg" /></div>
<div><img data-u="image" src="img/a.jpg" /></div>
<div><img data-u="image" src="img/b.jpg" /></div>
</div>

<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 06 -->
<style>
.jssorb06 div, .jssorb06 div:hover, .jssorb06 .av
{
background: url(img/b06.png) no-repeat;
overflow:hidden;
cursor: pointer;
}
.jssorb06 div { background-position: -6px -6px; }
.jssorb06 div:hover, .jssorb06 .av:hover { background-position: -36px -6px; }
.jssorb06 .av { background-position: -66px -6px; }
.jssorb06 .dn, .jssorb06 .dn:hover { background-position: -96px -6px; }
</style>
<!-- bullet navigator container -->
<div data-u="navigator" class="jssorb06" style="position: absolute; bottom: 16px; left: 6px;">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="POSITION: absolute; WIDTH: 18px; HEIGHT: 18px;"></div>
</div>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</div>
</div>
</div>
</div>

می خواستم ببینم چجوری می تونم این مشکل رو حل کنم

ممنون