Question

目标是创建说明学习主题的视觉效果。特定区域应可单击，以能够调用包含学习内容的模式。我的问题是，由于窗口大小的变化或设备的不同，我无法将按钮定位在图像上，从而使按钮的位置相对于图像所属的区域相对。也许我在思考和尝试使圈子成方形时是完全错误的。如果可以，请告诉我;-)

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

.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>

Answer 1

在您的position:absolute上将top:50%与left:50%，transform(-50%, -50%)和.img-overlay结合使用以实现该行为。

尽管top和left偏移了.img-overlay父级的50％高度/宽度，transform将其向另一个方向拉动了50％ img-overlay自己的大小。

.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>

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

1 个答案: