时间戳

首页 > 解决方案 > 按钮相对和过度响应图像的自由定位

bootstrap-4 - 按钮相对和过度响应图像的自由定位

问题描述

目的是创建一个说明学习主题的视觉效果。特定区域应可点击，以便能够调用包含学习内容的模式。我的问题是，由于更改窗口大小或不同的设备，我无法将按钮放置在图像上，以便在调整大小时它们的位置仍然与图像中它们所属的区域相关。也许我的想法是完全错误的，并试图把圆圈摆正。如果，请告诉我；-)

我尝试使用在这里找到的代码片段。垂直定位是可能的。水平定位不行。

.img-wrapper {
  position: relative;
 }

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  height: 25%;

}
     <head>
            <title>IoW</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        	
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
            <link rel="stylesheet" href="css/custom.bootstrap.min.css">
            <link rel="stylesheet" href="css/custom_iow.css">
        	
            <script src="script/jquery.min.js"></script>
        
            <script src="script/bootstrap.min.js"></script>
            <script src="script/adscript.js"></script>
        
        </head>
        
        <body style="background-color:#009BA5;">
            <div class="img-wrapper">
                <img class="img-responsive" src="http://lorempixel.com/output/people-q-c-640-480-6.jpg">
                <div class="img-overlay">
                    <button href="#modOpt" data-toggle="modal" class="btn btn-md btn-success"><span class="glyphicon glyphicon-plus"></span> Golden Circle</button>
                </div>
            </div>
            <div class="modal fade" id="modOpt" role="dialog">
                <!-- Some modal code -->
            </div>
        </body>

标签： bootstrap-4

解决方案

position:absolute结合使用,top:50%和left:50%你transform(-50%, -50%)来.img-overlay实现该行为。

虽然top和left50% 抵消了.img-overlay父母高度/宽度的 50%，但transform将其拉回另一个方向img-overlay自身大小的 50%。

.img-wrapper {
  position:relative;
  display:inline-block;
}
.img-wrapper img {
  width:100%;
  height:100%;
}
.img-overlay {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display:block;
  background:red;
}
<div class="img-wrapper">
  <img src="https://dummyimage.com/500x500" alt=""/>
  <a href="#" class="img-overlay">Lorem</a>
</div>

<div class="img-wrapper">
  <img src="https://dummyimage.com/800x450" alt=""/>
  <a href="#" class="img-overlay">Lorem</a>
</div>

<div class="img-wrapper">
  <img src="https://dummyimage.com/1920x1080" alt=""/>
  <a href="#" class="img-overlay">Lorem</a>
</div>

推荐阅读