更改按钮大小时的行为答案

【问题标题】：Behaviour when changing the size of a button更改按钮大小时的行为
【发布时间】：2022-01-28 10:34:14
【问题描述】：

我正在创建一个拨动开关。我希望它能够响应，以防我将来想调整它的大小。拨动开关中有一个红色方块（用于演示），问题是当我更改拨动开关的宽度和高度时，红色方块会拉伸并改变其尺寸。我想要什么喜欢它做的就是保持它的形状，不管拨动开关有多大或多小，它都不会四处移动。

这是一个演示：

width: 9em;
height: 4.5em;

/*half the size*/    
width: 4.5em; 
height: 2.25em;

红色方块由于某种原因变成了一个矩形，并向左移动。 下面是我希望它在更改宽度和高度时的样子（又名完全相同，只是更小）

我已经尝试过百分比、vh、最小宽度、最大宽度、em、rem、px 并且列表还在继续。有什么想法吗？

* {
    box-sizing: border-box;
}
button {
/*the height is 50% of the width*/
    width: 9em;
    height: 4.5em;
    border-radius: 100px 100px;
    border:none;
    padding-left: 1em;
}

.switch {
    display: block; 
    width: 40%;
    height: 70%;
    background-color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <button>
                 <span class="switch"></span>
            </button>
    </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

如果您想保持 1:1 的纵横比，您应该尝试对 width 和 padding-bottom 使用相同的值，您可以在此处阅读此答案：How to style a div to be a responsive square?

这是您修改后的示例：

* {
  box-sizing: border-box;
}

button {
  /*the height is 50% of the width*/
  width: 18em;
  height: 9em;
  border-radius: 100px 100px;
  border: none;
}

.switch {
  display: block;
  height: 0;
  width: 35%;
  padding-bottom: 35%;
  margin-left: 10%;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <button>
                 <span class="switch"></span>
            </button>
</body>

</html>

【讨论】：

【解决方案2】：

您可以使用min-width 和min-height 和/或max-width 和max-height

.switch {
    display: block; 
    min-width: 4rem;
    min-height: 4rem;
    background-color: red;
}

【讨论】：

【解决方案3】：

padding 你也改了半号。但是使用填充作为位置是个坏主意。

* {
  box-sizing: border-box;
}

button {
  /*the height is 50% of the width*/
  width: 9em;
  height: 4.5em;
  border-radius: 100px 100px;
  border: none;
  padding-left: 1em;
  margin-right: 2em;
}

.switch {
  display: block;
  width: 40%;
  height: 70%;
  background-color: red;
}

button.half {
  width: 4.5em;
  height: 2.25em;
  border-radius: 100px 100px;
  border: none;
  padding-left: 0.5em;  /* !!! */
}

<button>
  <span class="switch"></span>
</button>

<button class="half">
  <span class="switch"></span>
</button>

【讨论】：

【解决方案4】：

您还必须将填充减半。将代码放入 tryit 编辑器后，我的结果看起来很相似，但是将按钮的填充设置为 0.5em 就可以了。试试这个：

button {
/*the height is 50% of the width*/
    width: 9em;
    height: 4.5em;
    border-radius: 100px 100px;
    border:none;
    padding-left: 1em;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。