@NikitaSova

Что делать если не отображается img на ios?

Здравствуйте, недавно переделывал верстку на своём сайте и решил посмотреть как он выглядит на айфоне (на телефоне и пк вроде нормально выглядело). Посмотрев в эмуляторе, я заметил, что картинки тегов img, помещённых в кнопки, не отображаются, то есть кнопка пустая. При с более крупной кнопкой с img внутри всё было нормально.
Возможно ли так, что ios не отображает картинку если она помещена в слишком маленький елемент? Если да, то как можно это обойти, не меняя размер элемента(в моём случае кнопки).
HTML:
<html>
<head>
	<title>NikitaSoft Calculator</title>
	<script src="calccode.js"></script>
</head>
<body>
<div class="main">

  <!-- top section with menu button -->
	<div class="menu">
		<div><button class="menu" onclick="window.location.href = 'index.html';">menu</button></div>
		<div></div>
		<div><input class="menutext" value="calculator"></div>
	</div>


	<div class="space"></div>

  <!-- section with main calculator inputs and "clear" buttons -->
	<div class="inputs">
		 <div><input class="main" id="first" value="0" readonly></div>
		 <div><button class="clearbutton" onclick="CE()">CE</div>
		 <div><input class="main" id="second" readonly></div>
		 <div><button class="clearbutton" onclick="clearfunc()">CLEAR</div>
		 <div><input class="main" id="third" value="0" readonly></div>
		 <div><button class="clearbutton" onclick="clearallfunc()">CLEAR ALL</div>
	 </div>

  <!-- section with green inputs and "memory" buttons -->
	<div class="memory">
		<div><input class="memorytext" value="M1" readonly></div>
		<div><input class="memoryinput" id="firstmemory" readonly></div>
		<div class="memorybuttons">
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="onefirstmemorybutton()"><img src="mb1.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="twofirstmemorybutton()"><img src="mb2.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="threefirstmemorybutton()"><img src="mb3.png" height="100%" width="100%"></button></div>

			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="onesecondmemorybutton()"><img src="mb1.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="twosecondmemorybutton()"><img src="mb2.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="threesecondmemorybutton()"><img src="mb3.png" height="100%" width="100%"></button></div>

			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="onethirdmemorybutton()"><img src="mb1.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="twothirdmemorybutton()"><img src="mb2.png" height="100%" width="100%"></button></div>
			<div><button style="width: 100%; height: 100%;" class="memorybutton" onclick="threethirdmemorybutton()"><img src="mb3.png" height="100%" width="100%"></button></div>
		</div>


		<div><input class="memorytext" value="M2" readonly></div>
		<div><input class="memoryinput" id="secondmemory" readonly></div>


		<div><input class="memorytext" value="M3" readonly></div>
		<div><input class="memoryinput" id="thirdmemory" readonly></div>

	</div>

  <!-- section with keyboard and "action" buttons-->
	<div class="keyboard">
		<div><button class="calcbutton" onclick="writesymbolsscript('+')">+</div>
		<div><button class="calcbutton" onclick="writesymbolsscript('-')">-</button></div>
		<div><button class="calcbutton" onclick="writesymbolsscript('X')">X</button></div>
		<div><button class="calcbutton" onclick="writesymbolsscript('/')">/</button></div>
		<div><button onclick="writescript('7')">7</button></div>
		<div><button onclick="writescript('8')">8</button></div>
		<div><button onclick="writescript('9')">9</button></div>
		<div class="sciencebutton"><button class="sсiencebutton" onclick="sciencemode()"><img src="science.png" height="auto" width="90%"></button></div>
		<div><button onclick="writescript('4')">4</button></div>
		<div><button onclick="writescript('5')">5</button></div>
		<div><button onclick="writescript('6')">6</button></div>
		<div><button onclick="writescript('1')">1</button></div>
		<div><button onclick="writescript('2')">2</button></div>
		<div><button onclick="writescript('3')">3</button></div>
		<div style="grid-row: span 2;"><button class="resultbutton" onclick="equallity()">=</button></div>
		<div><button onclick="plusminusswitch()">+/-</button></div>
		<div><button onclick="writescript('0')">0</button></div>
		<div><button onclick="dotwrite()">,</button></div>
	</div>

	<!-- section with company name or ad -->
	<div class="name">
		<div><iframe frameborder="0" height="100%" width="100%" src="BB.html"></iframe></div>
	</div>
</div>
</body>
<script>
	firstmemory.value = localStorage.getItem('firstmemory');
	secondmemory.value = localStorage.getItem('secondmemory');
	thirdmemory.value = localStorage.getItem('thirdmemory');
	document.getElementById('first').style.backgroundColor='#fffbc2';
	if (localStorage.getItem('science') == null)
	{
	localStorage.setItem('science', 0);
	localStorage.setItem('sciencename', "");
	}
else
	{
	first.value = localStorage.getItem('science');
	second.value = localStorage.getItem('sciencename');
	localStorage.setItem('science', 0);
	localStorage.setItem('sciencename', "");
	}
</script>
</html>


CSS:
div {  /* same options for all divs */
 font: bold LUCIDA CONSOLE;
 border: hidden;
 background: white;
 width: 100%;
 height: 100%;
 color: black;
 touch-action: none;
}
div.space {
  height: 1%;
}
div.main {
margin: auto;
}
div.menu {
display: grid;
grid-template-columns: 23% 33% 43%;
grid-template-rows: 100%;
font-size: 3.4em;
height: 5%;
background: #e6e6e6;
text-align: right;
}
div.inputs {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: 33% 33% 33%;
  font-size: 1.7em;
  height: 18%;
  text-align: right;
}
div.memory {
  display: grid;
  grid-template-columns: 17% 58% 25%;
  grid-template-rows: 33% 33% 33%;
  height: 14%;
}
div.memorybuttons {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33%;
  grid-row: span 3;
}
div.keyboard {
  display: grid;
  grid-template-columns: 25% 25% 25% 26%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  height: 45%;
}
div.name {
 height: 18%;
}
div.sciencebutton{
font-size: 100%;
border-radius: 10%;
grid-row: span 2;
}
.menu * {
background: #e6e6e6;
text-align: center;
font-size: 50px;
font-family: sans-serif;
}

/* button styles */
button { /* same options for all buttons */
  width: 95%;
  height: 95%;
  border-radius: 10%;
  border: 1px solid #aaaaaa;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: bold LUCIDA CONSOLE;
  font-weight: bold;
  font-size: 4em;
  color: black;
}
button:hover {
background-color: #c8c8c8;
}
button.menu {
background: #d5f4d9;
font-size: 95%;
color: black;
}
button.clearbutton {
font-size: 1.3em;
background-color: #ff00001f;
}
button.calcbutton {
background-color: #e0e2ff;
}
button.resultbutton {
background-color: #d5f4d9;
height: 97%;
}
button.sсiencebutton {
  height: 97%;
}
button.memorybutton {
background-color: white;
}

/* input styles */
input { /* same option for all inputs */
  font: bold LUCIDA CONSOLE;
  width: 100%;
  height: 100%;
  font-size: max(1em, min(3.4em, calc(100vw * 4 / 75)));
}
input.menutext{
font-size: 1em;
text-align: right;
border: hidden;
}
input.main{
border: 0;
text-align: right;
outline:none;
}
input.memorytext{
background: white;
text-align: center;
border: hidden;
}
input.memoryinput{
  height: 94%;
  width: 98%;
background: #d5f4d9;
text-align: left;
border-radius: 5px;
border: 1px solid #aaaaaa;
}
input.NSname{
  font: LUCIDA CONSOLE;
  font-weight: bold;
  font-size: 7em;
  touch-action: none;
  text-align: center;
  border: hidden;
  magrin: 0;
}

ссылка на сайт:62f3c505b87a2725279077.png https://nikitasoft.com/calculator.html
Заранее спасибо.
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы