Boostrap：调整大小时如何在图像上“粘贴”按钮

elunap 发表于 Dev

lun

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

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

 }

特里摩斯

啊，好老的“如何在响应式图像上叠加内容-响应式”问题。

有点棘手，但还算不错。棘手的是如何在图像大小更改时使填充物的垂直位置响应。

别担心，这是一种简单的方法：

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-overlayDIV从图像的顶部向下。在此示例中，按钮的顶部将始终位于图像下方50％（height: 50%如果您希望按钮更高或更低，请更改属性）。

jsfiddle

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

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

对于其他屏幕宽度，依此类推。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-25

我来说两句

0条评论

登录后参与评论

上一篇：编译后Visual Studio冻结。当我尝试启动应用程序时，资源管理器也是如此

来自分类Dev

Related 相关文章

文章

Boostrap：调整大小时如何在图像上“粘贴”按钮

Boostrap：调整大小时如何在图像上“粘贴”按钮

如何在WPF中调整窗口大小时缩放按钮

调整按钮大小时如何调整按钮内内容的大小

如何在视口调整大小时逐步缩放以调整图像大小

如何调整按钮图像的大小？

调整窗口大小时如何使图像流畅？

在JavaFX中调整窗口大小时如何调整图像大小

调整Web浏览器大小时如何使图像按钮保持在原位

如何在Mac OSX上使用终端调整图像大小？

如何在图像上响应性地调整div大小？

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小？

如何在图像背景上固定按钮，并在调整大小后将其固定在那里？

调整面板/窗体大小时如何在面板中重新排列多个按钮？

调整大小时如何在左侧而不是右侧制作背景图像剪辑

HTML/CSS：如何在调整窗口大小时使图像周围的文本适合？

如何在使用“ CarouselSlider”时相对于移动设备大小调整图像大小，并在图像上使按钮文字颤抖？

如何定位和调整图像按钮的大小

在调整大小时在主体上滚动背景图像

调整大小时使图像居中

调整大小时图像模糊

调整大小时响应图像

调整屏幕大小时，boostrap 侧边栏按钮不可见

Matlab GUI：调整GUI窗口大小时，调整图像大小（加载到按钮）

如何在使用页面调整Flex大小时在主要内容上显示右侧栏？

调整窗口大小时如何防止按钮移动

如何在浏览器调整大小时保持图像和表格单元格的大小相对

调整大小时如何防止图像填充整个Tkinter窗口？

使用最大设备宽度调整大小时如何隐藏图像？

在Shrine中调整原始图像大小时如何上传

如何在Tkinter中调整按钮的大小？