小贝子编程

Scale Div和子元素

  • 本文关键字：元素 Div Scale 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和子对象可具体化？我试着制作#dibjo宽度：30%；并且#dibjo-div宽度：10%，但是整个图像消失。

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

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);
}
<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>

将#dibjo的宽度更改为30%，然后将内部div的宽度更改至7.69%，即100除以您的div数量->100/13。高度也是如此。

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

width和height对于块元素的行为不同。例如，如果将div的宽度设置为20%，则在收缩窗口时，它将相对于窗口进行调整。高度也不一样——当你缩小窗口时，高度不会调整大小。

要在调整窗口大小（缩小）时调整高度，必须设置position: absolute;。然后问题就变成了如何定位div。这将需要指定top和left规则，这些规则也可以作为百分比来执行。所以，基本上

#dibujo div{
  position: absolute;
  width: some %;
  height: some %;
  top: some %;
  ...
}

这将是更多的工作，但整个事情应该调整大小，你缩小窗口。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium