Boostrap:如何“坚持"调整大小时图像上的按钮 [英] Boostrap: How to "stick" a button over an image when re-sizing

问题描述

我有一个需要在其中放置按钮的图像，问题是我不知道如何放置按钮并在缩小浏览器尺寸时自动调整其大小和位置，现在我有了按钮，但是当我调整浏览器大小以减小按钮移动量时，我尝试在css buy中使用百分比不起作用，该怎么办?

I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?

<div id="discover" class="container-fluid">
<div class="row-fluid"> 
  <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
    <img id="discoveryour" src="img/x.png" class="img-responsive">
  </div>  
</div>
<div class="row-fluid"> 
  <div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form> 
</div>
</div>
</div> 

Css:

  .withimg {
  width: 100%;
  overflow:hidden;
  padding: 0px;
  margin: 0px;
 }

  #discover{
  position: relative;  
 }

#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;

 }

推荐答案

啊，好老的如何在响应式图像上叠加东西".

Ah, the good old "how to overlay stuff on top of a responsive image -- responsively" question.

有点棘手，但还不错.棘手的是如何在图像尺寸改变时使东西的垂直位置响应.

A little tricky, but not too bad. The tricky bit is how to make the stuff's vertical position responsive when the image size changes.

不要害怕，这是一种简单的方法:

Fear not, here's one simple way to do this:

HTML:

<div class="img-wrapper">
    <img class="img-responsive" src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
    <div class="img-overlay">
      <button class="btn btn-md btn-success">Button</button>
    </div>
</div>

CSS:

.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;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

img-overlay:before伪类通过从图像顶部向下推动img-overlay div来处理垂直定位作业.在此示例中，按钮的顶部将始终位于图像下方50％的位置(如果希望按钮的更高或更低，请更改height: 50%属性).

The img-overlay:before pseudo-class handles the vertical positioning job by pushing the img-overlay div down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50% attribute if you want the button higher or lower).

jsfiddle

要使按钮的 size 响应窗口宽度，可以为按钮创建一个新的类.我们将其称为btn-responsive(在上面的示例中，它替换了btn-md).然后使用@media查询针对不同的窗口宽度调整btn-responsive属性.像这样:

To make the button size responsive to window width, you can create a new class for your button. Let's call it btn-responsive (this replaces btn-md in the example above). Then use @media queries to adjust the btn-responsive attributes for different window widths. Something like this:

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

以此类推，以获取其他屏幕宽度.

and so forth for other screen widths.

这篇关于Boostrap:如何“坚持"调整大小时图像上的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！