缩放Div和子元素

时间：2016-04-13 17:04:33

标签： html css

所以我得到了这个用divs

的像素图像 

#dibujo {
  margin: auto;
  width: 390px;
  height: 600px;
}
#dibujo div {
  width: 30px;
  height: 30px;
  float: left;
}
body {
  background-color: rgb(51, 173, 255);
}
a {
  text-decoration: none;
}
#red {
  background-color: rgb(230, 0, 0);
}
#orange {
  background-color: rgb(230, 92, 0);
}
#black {
  background-color: rgb(0, 0, 0);
}
#pink {
  background-color: rgb(255, 51, 153);
}
#gray {
  background-color: rgb(128, 128, 128);
}
#darkGray {
  background-color: rgb(38, 38, 38);
}
#white {
  background-color: rgb(255, 255, 255);
}
<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title></title>
</head>

<body>
  <a href="http://fezgame.com/">
    <div id="dibujo">
      <div></div>
      <div></div>
      <div></div>
      <div id="orange"></div>
      <div id="red"></div>
      <div id="red"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div id="orange"></div>
      <div id="red"></div>
      <div id="red"></div>
      <div id="red"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div id="red"></div>
      <div id="red"></div>
      <div id="red"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div></div>

      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>

      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="black"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="black"></div>
      <div id="white"></div>

      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="black"></div>
      <div id="black"></div>
      <div id="black"></div>
      <div id="black"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>

      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="pink"></div>
      <div id="pink"></div>
      <div id="black"></div>
      <div id="black"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>

      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="pink"></div>
      <div id="black"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>

      <div></div>
      <div></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>

      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div id="darkGray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="darkGray"></div>
      <div id="darkGray"></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="darkGray"></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div id="white"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="darkGray"></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div id="darkGray"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div id="gray"></div>
      <div></div>
      <div></div>
      <div></div>
      <div id="darkGray"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </a>
</body>
CSS有一个固定的图像大小，我如何更改CSS以使div和子可重新调整大小？我试图使#dibujo宽度：30％;和#dibujo div宽度：10％，但整个图像消失。

2 个答案:

答案 0 :(得分：0)

将#dibujo的宽度更改为30％，然后将内部div的宽度更改为7.69％，即100除以div的数量 - ＆gt;一十三分之百。高度也一样。

#dibujo{
margin: auto;
width: 30%;
height: 600px;
}
#dibujo div{
width: 7.69%;
height: 30px;
float: left;
}

答案 1 :(得分：0)

使用视口宽度/高度和CSS calc()将为您提供此

＆＃13;
＆＃13; 
body {
  background-color: rgb(51, 173, 255);
}
#dibujo {
  margin: auto;
  width: 50vw;                    /*  viewport width to scale   */
  height: 80vh;                   /*  viewport height to scale  */
}
#dibujo div {
  width: calc(100% / 13);         /*  divide 13 div per row with 100% of parent   */
  height: calc(100% / 13);        /*  divide 13 row of div's with 100% of parent  */
  float: left;
}
a {
  text-decoration: none;
}
#red {
  background-color: rgb(230, 0, 0);
}
#orange {
  background-color: rgb(230, 92, 0);
}
#black {
  background-color: rgb(0, 0, 0);
}
#pink {
  background-color: rgb(255, 51, 153);
}
#gray {
  background-color: rgb(128, 128, 128);
}
#darkGray {
  background-color: rgb(38, 38, 38);
}
#white {
  background-color: rgb(255, 255, 255);
}
＆＃13; 
<a href="http://fezgame.com/">
  <div id="dibujo">
    <div></div>
    <div></div>
    <div></div>
    <div id="orange"></div>
    <div id="red"></div>
    <div id="red"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div id="orange"></div>
    <div id="red"></div>
    <div id="red"></div>
    <div id="red"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div id="red"></div>
    <div id="red"></div>
    <div id="red"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div></div>

    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>

    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="black"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="black"></div>
    <div id="white"></div>

    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="black"></div>
    <div id="black"></div>
    <div id="black"></div>
    <div id="black"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>

    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="pink"></div>
    <div id="pink"></div>
    <div id="black"></div>
    <div id="black"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>

    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="pink"></div>
    <div id="black"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>

    <div></div>
    <div></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>

    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div id="darkGray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="darkGray"></div>
    <div id="darkGray"></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="darkGray"></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div id="white"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="darkGray"></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div id="darkGray"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div id="gray"></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="darkGray"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</a>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题