@NikitaSova

Как исправить сжимание img на ios?

Здравствуйте. Я недавно начал делать верстку для сайта и решил посмотреть в эмуляторе как он выглядит на айфоне (смотрел на ios 15.4), и увидел, что айфон очень сильно сжимает картинку по горизонтали. Связано ли это с тем что картинка находится в кнопке? проблема в том, что я смотрел другие страницы в эмуляторе, где также есть кнопки с картинками внутри, и с ними всё нормально. Я сделал песочницу с одной нужной кнопкой, стал разбираться, но ничего так и не надумал.
62fbd070453e8995607358.png
Простите за качество изображения, но здесь видно, что картинка не во всю ширину кнопки.
Код:
<html>
<head>
	<link rel="icon" href="icon.png">
	<title>NikitaSoft Organizer</title>
	<style>
	button {
	  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.memorybutton {
	background-color: white;
	align-self:center;
	}
	</style>
</head>
<body>
	<button style="width: 16.67%; height: 8%;" class="memorybutton"><img src="mb1.png" height="100%" width="100%"></button>
</body>
<script>
</script>
</html>

ссылка на сайт(песочницу): https://nikitasoft.com/index.html
Заранее спасибо! Буду благодарен за любой совет.
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
Вы используете атрибуты height="100%" width="100%" для изображения. Соответственно, контейнер изображения принимает размеры кнопки, изображение растягивается до размеров и пропорций кнопки.
Попробуйте добавить изображению css-свойство object-fit: contain; - оно позиционирует изображение по центру контейнера с сохранением истинных пропорций изображения.

62fb3d6998679112552397.jpeg
Ответ написан
Ваш ответ на вопрос

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

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