2013-03-08 4 views
1

Итак, у меня есть 5 треугольных изображений, вложенных друг в друга в div. Я просто хочу, чтобы изображения изменялись в зависимости от размера окна или просто сохраняли соотношение сторон в разных разрешениях. В настоящее время я имею фиксированную ширину, но на 100% открываю альтернативные методы, чтобы получить эту работу или даже правильный способ ее выполнения.Измените размер DIV с несколькими изображениями при изменении размера окна

HTML

<div id="projects"> 

    <div id="project_1"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_2"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_3"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_4"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 

    <div id="project_5"> 
     <div id="snitch"> 
      <img class="tribox1" src="" /> 
      <img class="tribox2" src="" /> 
      <img class="tribox3" src="" /> 
      <img class="tribox4" src="" /> 
      <img class="tribox5" src="" /> 
     </div> 
    </div> 
</div> 

CSS

body { 
    background-color: #1b1b1b; 
    margin: 0; 
    padding: 0; 
    overflow: hidden ; 
    position: relative; 
    -webkit-transition: left .2s ease; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    width: 9800px; 
} 

#projects { 
    padding-top: 3.085%; 
} 

#project_1, #project_2, #project_3, #project_4, #project_5 { 
    float: left;  
} 


#snitch { 
    width: 1960px; 
} 

.tribox1 { 
    background-repeat: no-repeat; 
    background-position: bottom; 
    padding-top: 5px; 
} 

.tribox2 { 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin-left: -498px;  
} 

.tribox3 { 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-left: -501px;  
} 

.tribox4 { 
    background-repeat: no-repeat; 
    background-position: right center; 
    margin-left: -500px; 
} 

.tribox5{ 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    margin-left: -464px; 
    padding-top: 51px; 
} 
+0

со следующего поста вперед, пожалуйста, рассмотреть вопрос о добавлении jsfiddle тоже :) http://jsfiddle.net/arjuncc/ETZkV/ – arjuncc

ответ

0

Похоже, ваш ищет макет жидкости и (осмелюсь сказать) в 'адаптивный дизайн' - установить контейнер по ширине : 100% и установите ваши изображения в float: left, width: 20%, height: auto; Если у вас максимальный размер для контейнера, установите максимальную ширину в контейнере для этого размера.

0

Если вы хотите, чтобы изменить размер изображения, используйте следующий код ..

$(window).resize(function() { 
    var h = parseInt($(window).height(), 10); 
    var w = parseInt($(window).width(), 10); 
    $("img").css({ 
     'width': w, 
     'height': h 
    }); 
});