Title: Scale Div and child element
Tags: html;css
Question: So I got this pixel image maded with divs
#dibujo {
margin: auto;
width: 390px;
height: 600px;
#dibujo div {
width: 30px;
height: 30px;
float: left;
body {
background-color: rgb(51, 173, 255);
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&gt;
<html&gt;
<head&gt;
<link rel="stylesheet" type="text/css" href="css/main.css"&gt;
<title&gt;</title&gt;
</head&gt;
<body&gt;
<a href="http://fezgame.com/"&gt;
<div id="dibujo"&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="orange"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="orange"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
</div&gt;
</a&gt;
</body&gt;
The CSS has got a fixed size for the image, how can I change the CSS to make the div and the child reizable? I tried to make the #dibujo width: 30%; and the #dibujo div width: 10% but th entire image disappears.

Here is the accepted answer: Using viewport width/height and CSS calc() will give you this
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;
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/"&gt;
<div id="dibujo"&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="orange"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="orange"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div id="red"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="pink"&gt;</div&gt;
<div id="black"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div id="white"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div id="gray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div id="darkGray"&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
<div&gt;</div&gt;
</div&gt;
</a&gt;
Comment for this answer: Works perfectly, thnks

Here is another answer: Change the width of #dibujo to 30%, and then change the width of the inside divs to 7.69%, which is 100 divided by your number of divs -> 100/13. The same is with the height.
#dibujo{
margin: auto;
width: 30%;
height: 600px;
#dibujo div{
width: 7.69%;
height: 30px;
float: left;

Here is another answer: width and height behave differently for a block element.  For example, if you set the width on a div to be a 20%, it will adjust relative to the window as you shrink the window.  The same is not true for height - the height will not resize as you shrink the window.
To make the height adjust as you resize (shrink) the window, you will have to set position: absolute;.  The issue then becomes positioning your divs.  This will require specifying top and maybe left rules, which you can also do as percentages.  So, basically
#dibujo div{
position: absolute;
width: some %;
height: some %;
top: some %;
It'll be more work but the whole thing should resize as you shrink the window.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:04/13/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'Scale Div and child element', 'ViewCount': 60, 'id': 36605081, 'user_AboutMe': None, 'user_AccountId': 7619231.0, 'user_DisplayName': 'Tapasa', 'user_Reputation': 66.0, 'user_Views': 9.0, 'user_id': 5777708.0}}