Question

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

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

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

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

http://www.bootply.com/fiF4GI3g0n

＆＃13;

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: 434px;
  max-width: 100%;
  position: relative;
  z-index: 1
}
.special_content {
  position: absolute;
  margin: auto;
  height: 85%;
  width: 70%;
  top: 0;
}
.rodney {
  position: absolute;
  margin: auto;
  height: auto;
  width: 100%;
  text-align: right;
  top: 4%;
  right: 16%;
  z-index: 5;
}
.rodney img {
  max-width: 315px;
  height: auto;
}
.special_arrow {
  position: absolute;
  margin: auto;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.special_arrow img {
  max-width: 916px;
  height: auto;
  display: block;
}

＆＃13;

<div class="special_box">
  <div class="special_content"></div>
  <div class="rodney">
    <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
  </div>
  <div class="special_arrow">
    <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
  </div>
</div>

＆＃13;

Answer 1

响应式设计

试试这个。使用此代码，箭头会根据屏幕大小减小大小。您可以根据需要进行编辑，

使用@media屏幕属性显示与屏幕尺寸相关的内容

<html>
<head>
<style>
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: 434px;
     max-width: 100%;
     position: relative;
     z-index: 1
}
.special_content {
     position: absolute;
     margin: auto;
     height: 85%;
     width: 70%;
     top: 0;
}
.rodney {
     position: absolute;
     margin: auto;
     height: auto;
     width: 100%;
     text-align: right;
     top: 4%;
     right: 16%;
     z-index: 5;
}
.rodney img {
     max-width: 315px;
     height: auto;
}
.special_arrow {
     position: absolute;
     margin: auto;
     bottom: 0;
     left: 0;
     z-index: 10;
}
.special_arrow img {
     width:60%;
     height: auto;
     display: block;
}
@media screen and (max-width:1800px){
     .special_arrow img {
     width:98%;
     height: auto;
     display: block;
     }
}
</style>
</head>

<body>
<div class="special_box">
  <div class="special_content"> </div>
  <div class="rodney"> <img    src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
  <div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>

Answer 2

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

http://www.bootply.com/wfxTqAKJfo

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>

响应式CSS帮助 - 图像/ Div比率

2 个答案:

响应式设计