Html 如何将elemet粘贴到旋转木马上不同大小的图像

我有一个旋转木马，有不同大小的图像，但它们都有相同的高度（500px）

在这张图片上，我想把导航按钮（上一页和下一页）放在左下角

我成功地将导航按钮放在垂直轴上我想要的位置，因为图片的高度是固定的，但仍在努力争取水平轴

实际上，这就是代码的样子

<div class="carousel" ng-controller="CarouselController as $ctrl">
  <img ng-show="$ctrl.currentIndex == 0"/>
  <img ng-show="$ctrl.currentIndex == 1"/>
  <img ng-show="$ctrl.currentIndex == 2"/>
  <img ng-show="$ctrl.currentIndex == 3"/>

  <div class="carousel-navigation">
    <a ng-click="$ctrl.showPrevious()"> <
    <a ng-click="$ctrl.showNext()" > >
  </div>
</div>

你知道我如何通过避免使用javascript来做到这一点吗

编辑：

编辑2：在图片上，大正方形是

，标题下的正方形是

，纯黑色正方形是

。当

img

的宽度小于时，下一个大正方形只是显示单击next后的外观，您可以使用“Left”css属性

编辑：您可以使用flex属性。 （jQuery仅用于更改图片）

$（文档）.ready（函数（）{
$（'#按钮1'）。单击（函数（）{
$（'img'）.attr（'src'，'https://picsum.photos/300/300?random=1');
});
$（'#按钮2'）。单击（函数（）{
$（'img'）.attr（'src'，'https://picsum.photos/200/300?random=1');
});
});
.container{
显示器：flex；
宽度：100%；
}
.容器.图像容器{
位置：相对位置；
保证金：0自动；
}
.container.image容器img{
宽度：100；
高度：自动；
}
.container.image container.navigation{
位置：绝对位置；
底部：3px；
左：0；
/*造型*/
背景色：石板蓝；
颜色：白色；
}

航行
图1
图2
但这会将我的容器导航放在容器的左侧，而不是图像的左侧，因此如果我有一个宽度较小的图像，则容器导航将为outHi，您可以使用Flex来完成此操作。我编辑了我的答案。
.carousel{
 position: relative;
 .carousel-navigation {
   position: absolute;
   bottom: 0
 }
}