Jak zachować wielkość obrazów i komórek tabeli względem zmiany rozmiaru przeglądarki

Question

Mam grę planszową z obrazem i tabelą.
Wyświetlacz działa poprawnie, gdy pracuję z Chrome, ale w innych przeglądarkach, na przykład w IE lub na innym komputerze z mniejszym ekranem, a następnie w moim ekranie jest zakłócany.
Gdy próbowałem zmienić rozmiar przeglądarki, znalazłem ten problem.

Przed rozmiaru przeglądarkę do lewej:

Po zmianie rozmiaru przeglądarki do lewej:

znalazłem posty na ten temat i zalecane, aby użyć:

margin-left: 10%; 
margin-right: 10%; 

do zdjęć, ale to nie pomogło.

CSS:

td { 
    width: 105px; 
    height: 90px; 
    text-align: left; 
    vertical-align: top; 
    border: 1px solid black; 
    position: relative; 
    margin-left: 10%; 
    margin-right: 10%; 
} 
table 
{ 
    position: fixed; 
    left:9px; 
    top:8px; 
} 

#dice 
{ 
    right: 230px; 
    position:fixed; 
    margin-left: 10%; 
    margin-right: 10%; 
} 

HTML:

<img id="dice" src="Resources/images/dice_5.png" number="5"> 
<table oncontextmenu="return false"> 
    <tbody> 
    <tr> 
    <td class="" cellnumber="1" row="0" col="0"><span>1</span></td> 
    <td class="" cellnumber="2" row="0" col="1"><span>2</span></td> 
    <td class="" cellnumber="3" row="0" col="2"><span>3</span></td> 
    <td class="" cellnumber="4" row="0" col="3"><span>4</span></td> 
    <td class="" cellnumber="5" row="0" col="4"><span>5</span></td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Używasz position: fixed; która przyjmuje table i img z obiegiem dokumentów i wyświetla je w tym samym miejscu ekran, nawet jeśli przewiniesz stronę; oznacza to, że nie są świadomi przestrzeni, którą zajmuje jeden z nich.

Jeśli nie potrzebne elementy, aby być fixed Proponuję zmianę ich kolejności w HTML i unoszący je zamiast:

table { 
 
    float: left; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    height: 90px; 
 
    margin-left: 10%; 
 
    margin-right: 10%;  
 
    position: relative; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    width: 105px; 
 
} 
 
#dice { 
 
    float: left; 
 
}

<table oncontextmenu="return false"> 
 
    <tbody> 
 
    <tr> 
 
    <td class="" cellnumber="1" row="0" col="0"><span>1</span></td> 
 
    <td class="" cellnumber="2" row="0" col="1"><span>2</span></td> 
 
    <td class="" cellnumber="3" row="0" col="2"><span>3</span></td> 
 
    <td class="" cellnumber="4" row="0" col="3"><span>4</span></td> 
 
    <td class="" cellnumber="5" row="0" col="4"><span>5</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<img id="dice" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJENkNBODk0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJENkNBOEE0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkQ2Q0E4NzQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkQ2Q0E4ODQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzLcF4AAAAzUExURR8fH7+/vz8/P19fX8/Pzw8PD39/f5+fny8vL6+vr+/v79/f34+Pj29vb09PTwAAAP///0v689cAAAI+SURBVHja7JjXjsQgDEUNpqby/1+7ZDaFlgAB7cNq/DLSyDqhGF/bYHbTqNaXplAfFPj9kQCCDOaVDUQASBengJgmI6AuHEfTbMgPHJemg0n+i1NouhiqDSfBdDJ7H2Bab8G9DwPaXdwwfYKPFh2mpJ+gm674sjAULv6ITGA5GLt8z+0JBHXtVTqRzjM8xh3nYzNEwXqulXkvh49PtJF7zvu3hxXW04X6L/ExfND3pfvfDo6FL/theWPoyyKcCF2me9wU+ooIR29cUhZ9muZx9B5HX+Dme9ycx80tZzdHOH1zW8kgDn11hDNQfHTRyUAcd+HyHl8ZSy7Ow/mnl0kqMnlpHs454Xy+lzxxZz7OjPhx4jjm013KN8BtSYYQVpp+mXX2/ohxTfbFxUGx2Evki+yCY2elplg7ztWsnL7lcb5mPetbAY5W5Jk8bqzQtwLcVJGjC3BLiFuacDX69vc4USHmBTh9o1lv4w7SmvUWR3wcaX2zc2GhUZpRpsIYLs13bK81kfVJn7YptFbQUH6lpx9OL/YVABZ1fQQ330Xf4i7NotmaZ6QJffNwNZqV9nVxvmbBY5gNkNS3tz3ZXN+TPSxveNGTycLK+F/0ZNjUk2HLZjHCyZaeTMZxxys0K9A3ngjjqUKzSLoOWp3Bh396oqI6wDO63bGMe2Eil1FEQi2J8oZGhuzRshT0UWyv1ei1HoH+SMumFS2Kh6ADEUK7iXGD9R249R4Hdh5W9h6l9h709h5D9x6Sdxvh/wgwAOIqZ8jWZlkFAAAAAElFTkSuQmCC" number="5" />

JS Fiddle:http://jsfiddle.net/LqwbLwv3/

Jeśli wymagane jest ich zachowanie fixed, a tabela ma ustawioną szerokość (co wydaje się być), możesz założyć jonów img z left Zamiast tego w ten sposób, że nie będzie próbował zajmują tyle samo miejsca co table:

table { 
 
    left:9px; 
 
    position: fixed; 
 
    top:8px; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    height: 90px; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    position: relative; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    width: 105px; 
 
} 
 
#dice { 
 
    left: 570px; 
 
    position:fixed; 
 
}

<img id="dice" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJENkNBODk0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJENkNBOEE0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkQ2Q0E4NzQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkQ2Q0E4ODQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzLcF4AAAAzUExURR8fH7+/vz8/P19fX8/Pzw8PD39/f5+fny8vL6+vr+/v79/f34+Pj29vb09PTwAAAP///0v689cAAAI+SURBVHja7JjXjsQgDEUNpqby/1+7ZDaFlgAB7cNq/DLSyDqhGF/bYHbTqNaXplAfFPj9kQCCDOaVDUQASBengJgmI6AuHEfTbMgPHJemg0n+i1NouhiqDSfBdDJ7H2Bab8G9DwPaXdwwfYKPFh2mpJ+gm674sjAULv6ITGA5GLt8z+0JBHXtVTqRzjM8xh3nYzNEwXqulXkvh49PtJF7zvu3hxXW04X6L/ExfND3pfvfDo6FL/theWPoyyKcCF2me9wU+ooIR29cUhZ9muZx9B5HX+Dme9ycx80tZzdHOH1zW8kgDn11hDNQfHTRyUAcd+HyHl8ZSy7Ow/mnl0kqMnlpHs454Xy+lzxxZz7OjPhx4jjm013KN8BtSYYQVpp+mXX2/ohxTfbFxUGx2Evki+yCY2elplg7ztWsnL7lcb5mPetbAY5W5Jk8bqzQtwLcVJGjC3BLiFuacDX69vc4USHmBTh9o1lv4w7SmvUWR3wcaX2zc2GhUZpRpsIYLs13bK81kfVJn7YptFbQUH6lpx9OL/YVABZ1fQQ330Xf4i7NotmaZ6QJffNwNZqV9nVxvmbBY5gNkNS3tz3ZXN+TPSxveNGTycLK+F/0ZNjUk2HLZjHCyZaeTMZxxys0K9A3ngjjqUKzSLoOWp3Bh396oqI6wDO63bGMe2Eil1FEQi2J8oZGhuzRshT0UWyv1ei1HoH+SMumFS2Kh6ADEUK7iXGD9R249R4Hdh5W9h6l9h709h5D9x6Sdxvh/wgwAOIqZ8jWZlkFAAAAAElFTkSuQmCC" number="5" /> 
 
<table oncontextmenu="return false"> 
 
    <tbody> 
 
    <tr> 
 
    <td class="" cellnumber="1" row="0" col="0"><span>1</span></td> 
 
    <td class="" cellnumber="2" row="0" col="1"><span>2</span></td> 
 
    <td class="" cellnumber="3" row="0" col="2"><span>3</span></td> 
 
    <td class="" cellnumber="4" row="0" col="3"><span>4</span></td> 
 
    <td class="" cellnumber="5" row="0" col="4"><span>5</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

JS Fiddle:http://jsfiddle.net/jw8buh20/