Как можно распределить кнопки Button по левому нижнему краю, центру, правому нижнему краю изображения, т.е. кнопки должны лежать на самом изображении. Каждое изображение имеет разный размер, и когда изображение меняет свой размер, то кнопки также должны поменять свои координаты.
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
position: relative;
width: 550px;
height: 354px;
margin: 10px;
}
.button{
display: inline-block;
width: 100px;
border-radius: 5px;
text-align: center;
position:absolute;
bottom:0;
}
.button-left { left:0;}
.button-right {
right:0px;
}
.button-center {
left: 50%;
right: 50%;
}
</style>
</head>
<body>
<div><img id="myImg" src="a.jpg"></div>
<div class="button button-left"><button onclick="document.getElementById('myImg').src='a.jpg'">Первая</button></div>
<div class="button button-center"><button onclick="document.getElementById('myImg').src='m.jpg'">Вторая</button></div>
<div class="button button-right"><button onclick="document.getElementById('myImg').src='n.jpg'">Третья</button></div>
</body>
</html>
Простой
Средний