我也在考虑媒体查询，但后来我发现了这个:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html 使用CSS维护div的纵横比

只需创建一个包装器<div>，并为padding-bottom设置一个百分比值，如下所示:

div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ ｝ < div > < / div >

它将生成一个<div>，其高度等于其容器宽度的75%(4:3长宽比)。

这种技术还可以与媒体查询和一些关于页面布局的专门知识相结合，以实现更细粒度的控制。

这足够我用了。这也足够满足你的需求了。

您可以使用ResizeObserver API。它还处于早期阶段，所以还不是所有的浏览器都支持它(但有一些填充程序可以帮助你做到这一点)。

这个API允许您在调整DOM元素大小时附加一个事件侦听器。

演示1 -演示2

我认为你可以用css完成你想要的唯一方法，就是为你的小部件使用流体容器。如果你的容器的宽度是屏幕的一个百分比，那么你可以根据你的容器的宽度使用媒体查询来设置样式，现在你会知道每个屏幕的尺寸是你的容器的尺寸。例如，假设你决定将容器的宽度设置为屏幕宽度的50%。然后对于屏幕宽度为1200px的容器，你知道你的容器是600px

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}

iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近发表的一篇关于响应式广告的文章。没有Javascript !

这是目前不可能与CSS单独写在接受的答案@BoltClock，但您可以通过使用JavaScript的工作。

我创建了一个容器查询(又名元素查询)填充来解决这类问题。它的工作方式与其他脚本略有不同，因此您不必编辑元素的HTML代码。你所要做的就是包括脚本，并在你的CSS中使用它，就像这样:

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill

对于我来说，我通过设置div的最大宽度来做到这一点，因此对于小部件不会受到影响，而大部件由于max-width样式而调整大小。

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }