Html 响应式CSS帮助-图像/分区比率

我需要一些CSS/响应代码方面的帮助。随着窗口大小的减小，我需要所有元素以相同的比例减小。有问题。箭头和公鸡不会随着视口的减小而减小

公鸡的脚影应该被箭稍微遮住。箭头主体的顶部（而不是点）应与灰色和白色部分之间的分界线保持一致

我需要一些CSS/响应代码方面的帮助。随着窗口大小的减小，我需要所有元素以相同的比例减小。有问题。箭头和公鸡不会随着观察孔的下降而减少

公鸡的脚影应该被箭稍微遮住。箭头主体的顶部（而不是点）应与灰色和白色部分之间的分界线保持一致

正文{
边际：0px；
}
1.特殊包装箱{
背景图像：url（“http://beta.madrooster.com/images/special_bg.png");
背景重复：无重复；
背景尺寸：100%自动；
高度：434px；
最大宽度：100%；
位置：相对位置；
z指数：1
}
.特别内容{
位置：绝对位置；
保证金：自动；
身高：85%；
宽度：70%；
排名：0；
}
罗德尼先生{
位置：绝对位置；
保证金：自动；
高度：自动；
宽度：100%；
文本对齐：右对齐；
最高：4%；
右：16%；
z指数：5；
}
罗德尼·伊姆{
最大宽度：315像素；
高度：自动；
}
.特殊箭头{
位置：绝对位置；
保证金：自动；
底部：0；
左：0；
z指数：10；
}
.特殊箭头img{
最大宽度：916px；
高度：自动；
显示：块；
}

响应性设计 试试这个。使用此代码，箭头会根据屏幕大小减小大小。你可以随意编辑它

使用@media screen属性显示与屏幕大小相关的内容

身体{
边际：0px；
}
1.特殊包装箱{
背景图像：url（“http://beta.madrooster.com/images/special_bg.png");
背景重复：无重复；
背景尺寸：100%自动；
高度：434px；
最大宽度：100%；
位置：相对位置；
z指数：1
}
.特别内容{
位置：绝对位置；
保证金：自动；
身高：85%；
宽度：70%；
排名：0；
}
罗德尼先生{
位置：绝对位置；
保证金：自动；
高度：自动；
宽度：100%；
文本对齐：右对齐；
最高：4%；
右：16%；
z指数：5；
}
罗德尼·伊姆{
最大宽度：315像素；
高度：自动；
}
.特殊箭头{
位置：绝对位置；
保证金：自动；
底部：0；
左：0；
z指数：10；
}
.特殊箭头img{
宽度：60%；
高度：自动；
显示：块；
}
@媒体屏幕和屏幕（最大宽度：1800px）{
.特殊箭头img{
宽度：98%；
高度：自动；
显示：块；
}
}

我找到了一种方法，可以让公鸡和箭的图像从顶部填充透明的空间。不确定这是不是最好的方法，但它确实有效

CSS代码

body {
     margin: 0px;
}
.special_box {
     background-image: url("http://beta.madrooster.com/images/special_bg.png");
     background-repeat: no-repeat;
     background-size: 100% auto;
     height: 440px;
     width: 100%;
     position: relative;
     z-index: 1
}
.special_content {
     margin: auto;
     height: auto;
     width: 100%;
     top: 0;
     position: relative;
}
.rodney {
     background-image: url("http://beta.madrooster.com/images/special_rodney.png");
     background-repeat: no-repeat;
     background-size: 22% auto;
     background-position: right 21% top;
     height: 440px;
     width: 100%;
     position: relative;
     z-index: 5
}

.special_arrow {
     background-image: url("http://beta.madrooster.com/images/special_arrow.png");
     background-repeat: no-repeat;
     background-size: 64% auto;
     background-position: left top;
     height: 440px;
     width: 100%;
     position: relative;
     z-index: 10
}

HTML代码

<div class="special_box">
  <div class="special_content">
  </div>
  <div class="rodney">
  <div class="special_arrow"> </div>
  </div>
</div>

---

这正是我遇到的问题。箭头和公鸡在屏幕宽度达到它们之前不会开始调整大小。我需要所有元素作为一个单元收缩/增长，而不是成为单个图形。

<div class="special_box">
  <div class="special_content">
  </div>
  <div class="rodney">
  <div class="special_arrow"> </div>
  </div>
</div>