使 HTML 按钮与其背景大小相同

发布于 2024-12-28 08:24:01 字数 326 浏览 0 评论 0原文

通常，您制作一个具有给定尺寸的按钮：

<button style="width: 120px; height: 40px;">
Mememe
<button>

然后添加与按钮尺寸相同的背景：

button
{
    background-size: 100% 100%;
}

显然，如果您希望它是 1:1，则图像也应该是 120x40 px。

但是有没有办法让按钮与图像大小相同？（既没有 IMG 元素也没有脚本）。

问候，

原文

Usually, you make a button with a given size:

<button style="width: 120px; height: 40px;">
Mememe
<button>

Then you add a background which is the same size as the button:

button
{
    background-size: 100% 100%;
}

Obviously, if you want it to be 1:1, the image should be 120x40 px too.

But is there a way to make the button same size as the image is? (With neither IMG elements nor scripts).

Regards,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

友谊不毕业 2025-01-04 08:24:01

不，不能仅使用 HTML 和 CSS。但是，可以使用 PHP（或其他一些服务器端脚本语言）或 JavaScript

回复收藏 0 原文

爺獨霸怡葒院 2025-01-04 08:24:01

一种方法可能是使用 JavaScript 获取加载图像的大小，然后在按钮上应用适当的样式：

var width = document.images[0].width;
var height = document.images[0].height;
var button = document.getElementById('button-id');
button.style.width = width;
button.style.height = height;

One way might be to get the size of the loaded image, using JavaScript, and then apply the appropriate style on your button:

var width = document.images[0].width;
var height = document.images[0].height;
var button = document.getElementById('button-id');
button.style.width = width;
button.style.height = height;

回复收藏 0 原文

~没有更多了~