max-width与max-height未生效：嵌入Dailymotion组件尺寸限制问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是把CSS属性当成HTML属性来用了——max-height和max-width是CSS样式属性，不是div标签的原生HTML属性，直接写在div标签里自然不会生效。

修复步骤&代码示例 #

你需要把宽高限制写成CSS样式，可以用内联style属性，或者单独的样式表：

方案1：内联样式直接设置父容器

<div style="max-height: 400px; max-width: 400px; overflow: hidden;">
  <div class="dailymotion-widget" data-placement="5ae8f699977fa0001314d656"></div>
  <script>(function(w,d,s,u,n,e,c){w.PXLObject = n; w[n] = w[n] || function(){(w[n].q =w[n].q || []).push(arguments);};w[n].l = 1 * new Date();e = d.createElement(s); e.async = 1; e.src = u;c = d.getElementsByTagName(s)[0]; c.parentNode.insertBefore(e,c);})(window,document,'script','https://widgets.dailymotion.com/widget/loader.js','PXL');</script>
</div>

这里注意两个关键点：

• 给max-height和max-width加上单位（比如px），没有单位的CSS尺寸值在大多数情况下是无效的
• 添加overflow: hidden，防止Dailymotion组件内容超出容器时溢出显示

方案2：用类名统一控制（更适合多组件场景）

如果页面上有多个这类组件，推荐用CSS类来管理样式：

<style>
  .dailymotion-container {
    max-height: 400px;
    max-width: 400px;
    overflow: hidden;
  }
  .dailymotion-widget {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持视频比例，避免拉伸变形 */
  }
</style>

<div class="dailymotion-container">
  <div class="dailymotion-widget" data-placement="5ae8f699977fa0001314d656"></div>
  <script>(function(w,d,s,u,n,e,c){w.PXLObject = n; w[n] = w[n] || function(){(w[n].q =w[n].q || []).push(arguments);};w[n].l = 1 * new Date();e = d.createElement(s); e.async = 1; e.src = u;c = d.getElementsByTagName(s)[0]; c.parentNode.insertBefore(e,c);})(window,document,'script','https://widgets.dailymotion.com/widget/loader.js','PXL');</script>
</div>

给.dailymotion-widget设置width:100%和height:100%，可以让它自适应父容器的尺寸，object-fit: contain则能保证视频内容按比例显示，不会被拉伸。

为什么原来的写法无效？ #

HTML标签的属性是它的原生特性（比如id、class、src），而max-height、max-width这类属于CSS层的样式规则，必须通过style属性、内部样式表或外部样式表来定义，直接作为HTML属性写在标签里是不被浏览器识别的。

内容的提问来源于stack exchange，提问作者Mk1