Итак, у меня есть 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;
}
со следующего поста вперед, пожалуйста, рассмотреть вопрос о добавлении jsfiddle тоже :) http://jsfiddle.net/arjuncc/ETZkV/ – arjuncc