Question

如何动态更改对象的宽度并保持对象居中？

到目前为止我所拥有的是：

function (theObject) {
  var origWidth = theObject.width();
  var newWidth = origWidth*2;  /* arbitrary example */

  theObject.width(newWidth);

  theObject.css('margin', '0 auto');
}

最后一句话不起作用。我做错了什么？

我真的希望不使用变换，因为＆＃34;白色空间＆＃34;问题

BTW，theObject的css样式预先指定为

#theObject {
   margin: 0 auto;
   width: #px;
   height: #px;
}

Answer 1

您的解决方案确实过于复杂。不需要JavaScript。

从评论中你说你有这些要求：

当窗口调整大小时，我的元素应该调整大小
我的元素只应调整大小才能在窗口中显示

您应该可以使用2个css属性来完成此操作。宽度/高度和最大宽度/最大高度。

使用max定义元素的最大大小，使用宽度/高度定义实际大小。

通过使用相对单位，您可以根据父级或窗口的宽度/高度动态调整宽度/高度。

我熟悉的相关单位包括：

％
vh和vw
EM
REM

％是父母的X％。当分配宽度时，它将是父宽度的X％。

vh和vw是视口值。 vh是视口高度，vw是视口宽度。如果我没记错的话，视口就是窗口中用于显示内容的空间。这不包括网址栏。

em是一个fontsize值;但是，它应该适用于宽度和高度尺寸。 em指的是当前的fontsize。

rem是一个fontsize值，它引用根（或文档的）字体大小。

如何在运行中更改对象的宽度并使对象保持居中

1 个答案: