如何将按钮放置在图像下，并在窗口大小改变时保持固定？
要将按钮放置在图像下，并在窗口大小改变时保持固定，可以使用HTML和CSS来实现。
首先，需要创建一个包含图像和按钮的HTML页面。可以使用以下代码作为示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
display: inline-block;
}
.image {
width: 100%;
height: auto;
}
.button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #f44336;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="your-image.jpg" alt="Your Image">
<button class="button">Click Me</button>
</div>
</body>
</html>在上述代码中，.container 类定义了一个相对定位的容器，.image 类定义了图像的样式，.button 类定义了按钮的样式。按钮使用绝对定位，并通过 bottom、left 和 transform 属性来将其放置在图像下方并居中对齐。
接下来，需要使用CSS媒体查询来在窗口大小改变时保持按钮的固定位置。可以使用以下代码作为示例：
@media screen and (max-width: 768px) {
.button {
position: static;
transform: none;
margin-top: 10px;
}
}在上述代码中，使用 @media 媒体查询来指定窗口宽度小于等于768px时的样式。在这种情况下，将按钮的定位属性设置为 static，取消绝对定位，并通过 margin-top 属性来保持按钮与图像的间距。
通过以上的HTML和CSS代码，可以将按钮放置在图像下，并在窗口大小改变时保持固定。
相关·内容
目前你可以看到，中心图像和下面的按钮并没有像我希望的那样组合在一起。在水平方向上，它的跨度很好，但根据窗口大小的不同，按钮会垂直重叠到图像上。我希望按钮是在一个固定的位置，直接在下面的图像，而不管窗口大小。
你可以看到我是如何把按钮放在下面的。有没有人能看到我哪里出了问题？
浏览 6提问于2017-02-12得票数 0
1回答
我有一个窗口和一堆按钮。这个窗口将是我的“主菜单”。在放置按钮后，我想让这些按钮固定到这个窗口的大小。因此，如果窗口改变(例如由用户改变)，它们应该填充窗口并改变其大小。
我该怎么做？
浏览 12提问于2013-01-14得票数 2
回答已采纳
2回答
我有一个WPF窗口，它的背景中有一个图像作为画布。这是一张海盗船的照片。我想有按钮连接到图像上的某些点，即使窗口的大小被改变，这些按钮也保持不变。有一个固定的窗口大小，这是好的。我可以选择热点，在任何地方，我的按钮将保持联系的同一位置上的图像？还是使用按钮的百分比定位？纽扣在画布
浏览 2提问于2014-01-22得票数 0
回答已采纳
因此，我创建了一个带有.png背景图像的图像视图，它显示按钮位置持有者，以帮助我确定我希望放置按钮对象的确切位置。因此，我将所有四面的图像视图固定为0，并将其调整到不同的屏幕大小。现在这个按钮出现了问题。我将按钮对象从对象库中拖出，并将其放在图像视图的正上方，按钮位置保持器图像位于该视图的位置。对于按钮，我对其宽度和高度进行了限
浏览 0提问于2015-08-12得票数 0
在我的网站上，我想将链接到社交媒体的图片放到这个图片中。我可以手动放置它们，但是当浏览器窗口改变大小时，我不知道如何将它们保持在圆圈上。当窗口变小时，上面的图像会缩小，但是链接不会停留在圆圈的位置。有什么方法可以通过仅仅在图像上放置锚元素来实现这一点呢？
浏览 7提问于2022-01-24得票数 2
2回答
在GTK#中定位和调整按钮大小
、、、、
我正在尝试在GTK#(GTK .NET)中创建一个UI .I已经创建了一个窗口，在vbox中拉出一个vbox，并且在顶部的vbox上我放置了一个button.But按钮占据了整个space.How我可以缩小按钮大小并固定其位置吗UI/窗口的大小是固定的，也就是说:用户不能改变大小
浏览 0提问于2013-12-09得票数 0
我试图创建固定大小的画布小部件与滚动条。问题中的画布可能相当大，而且几乎肯定会比包含它的框架大得多。我想保持画布的固定大小，但能够调整包含它的窗口的大小。问题是我不知道如何将滚动条绑定到窗口的边缘。grid的明显问题是它将简单地将滚动条放置在画布旁边。不幸的是，画布必须有一个固定的大小，总是比窗口大。每当我使用.pack时，画布
浏览 0提问于2019-05-14得票数 2
回答已采纳
我目前正在构建一个图像注释工具。图像被加载到父容器并绑定到父容器(边界窗格)。高宽比也保持不变。所附的代码片段说明了这些要点。，并在调整窗口大小时调整大小。在此基础上，我放置了一个画布，用户可以在上面绘制矩形。在绘制了一个矩形之后，会启动一个弹出，在该弹出中他们可以编写一个注释。保存后，用户可以悬停在绘制的矩形上，注释就会出现。我想知道是否可以访问图像的高度和宽度值，在调整
浏览 1提问于2016-03-27得票数 2
回答已采纳
当我有一个HTML格式的网页，改变窗口大小，文本将保持50%，而不是保持相同的格式，或将环绕图像，因为它的位置不正确。我如何将它保存在它自己的不可见的小盒子中，以便即使窗口大小发生变化也能保持该格式？
浏览 10提问于2018-09-06得票数 0
1回答
我有一个当前使用整个屏幕的画布动画，在画布前面，我放置了一个图像。当我调整窗口的宽度时，画布和图像会按比例正确地调整大小，但是当我的窗口高度改变时，画布会重新调整大小，图像会从页面上掉下来，只剩下画布。我怎样才能确保图像总是，比如说，屏幕高度的40%，或者当窗口高度/宽度改变时，图像
浏览 4提问于2015-12-15得票数 0
2回答
：
这个想法是，左边的方框和右边的方框应该在相同的高度，但由于我的代码中的某些东西不太正确，当我将相同的边距应用到右边的方框和左边的方框时，它们就不会是正确的。
浏览 1提问于2015-02-07得票数 1
2回答
我在窗口顶部的文本上放置了固定位置的白色到透明的PNG，它工作得很好:当我滚动页面时，文本平滑消失。问题是:我不能点击位于我的梯度下的链接。还有另一种解决方案，将渐变图像放在文本上，并在此图像下创建链接以保持活跃。示例：
浏览 1提问于2011-03-10得票数 1
回答已采纳
我希望在不改变导航栏高度的情况下，将导航栏的品牌图像与导航栏重叠(导航栏的固定高度为80px)。它有点工作，但是我不能让图像完全曝光，它是在顶部被剪切的。我尝试了vertical-align: top，但它只是稍微改变了位置，图像仍在被剪切。我希望它从屏幕的顶部开始，没有任何填充。在屏幕小于md的设备上，重叠的图像被隐藏，另一个图像被显示，现在应该是img-fluid，并将其<em
浏览 0提问于2019-02-11得票数 0
我有一个固定宽度和最大高度大小的块。我需要在这个块中放置两个元素:一个列表和一个动态大小图像。它们必须在一个级别上，就像表中的列。列表必须是主块的20%宽，图像- 80%宽。当窗口宽度减小时，图像将改变其大小。我需要列表填充整行高度，保持每个列表项的等高。
只有在CSS的帮助下，我才能做到这一点吗？同样，放弃ui li而倾向于将每个列表项表示为简单的div在这种情
浏览 5提问于2017-10-15得票数 0
回答已采纳
2回答
我有多个图像，我正在使用imcrop函数在图像中获取ROI。imcrop的问题是它在每个图像上给出了不同大小的ROI。我想为每个图像采取相同大小的ROI。在imcrop中有一个选项，我可以通过它来选择大小，但为此我需要保持ROI的位置不变。我想固定窗口大小，但改变窗口在图像上的位置。在
浏览 0提问于2013-03-20得票数 0
2回答
将标签放置在图像顶部
、、、、
我在WPF中使用了一个图像。在图像的顶部，我放置了标签。当调整我的窗口大小时，图像也会调整大小，这是可以的。但是，标签也应该重新定位。因此，它们在图像顶部保持相同的相对位置。目前我使用的是画布。如何在调整大小时固定标签的位置。
浏览 14提问于2011-06-26得票数 1
回答已采纳
3回答
当页面在窄屏幕上打开或浏览器窗口大小改变时，我需要一个div来改变它的位置。当页面向上或向下滚动时，固定的div应该留在相同的垂直位置，但我也需要它远离最大的div，比如说10px (较小div的容器，请参见图片)。现在，当我调整窗口大小时，固定的div位于div的右侧。所以问题是我如何让这个固定的div在垂直滚动页面时保持<e
浏览 0提问于2012-12-20得票数 3
回答已采纳
我有一个固定形状的窗口，并在GUI上放置了一些文本。Text(root)text.config(state='disabled')root.mainloop()这里有一张我的窗口的图片供参考：
浏览 808提问于2020-05-22得票数 2
回答已采纳
1回答
在为网站创建响应式布局时，如何才能使放置在页眉中的图像不改变大小(放大和缩小)？(因此，当我左右拖动浏览器时，它将保持相同的大小，并在页面顶部具有相同的位置，无论我使用的是什么大小，无论是移动设备大小还是桌面大小)
浏览 2提问于2015-01-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
