css - 如何在 <blockquote> 中剪辑 <img>-6ren

css - 如何在
中剪辑

转载作者：太空宇宙更新时间：2023-11-04 14:58:53

我试图限制我在 block 引用中加载的任何内容的水平大小(我不控制 block 引用中的内容，所以我知道它会搞砸我的布局)。这是页面布局的简化测试用例:

<html>
  <body>
    <div style="width: 800px; background-color: #ff0000;">
      <div style="display: table;">
        <div style="display: table-row;">
          <blockquote style="overflow:hidden;">
           <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
          </blockquote>
        </div>
      </div>
    </div>
  </body>
</html>

blockquote 的大小通过其父元素之一的宽度隐式设置，表格容器用于布局 blockquote 本身。

现在，如果您尝试将上述 html 复制/粘贴到 test.html 文件中，您将看到整个内部 div 显示为蓝色，超出了红色背景的边界。我想确保它在背景边界处被剪裁。

那么问题是:有没有一种方法可以在不改变 html 布局的结构并且不必在 blockquote 本身上再次设置显式宽度的情况下执行此操作(我不能这样做，因为我不知道实际大小blockquote 在实际布局中的位置，因为外部 div 中的其他元素占据了未知数量的水平空间)？

编辑

早些时候，我天真地尝试了以下方法。我在表格中添加了一个额外的列来说明我真的不知道表格中的其他元素会占用多少空间这一事实。

<html>
  <body>
  <div style="width: 800px; background-color: #ff0000;">
    <div style="display: table;">
      <div style="display: table-row;">
        <div style="display: table-cell;">
          <blockquote style="overflow:hidden;" id="inner">
            <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
          </blockquote>
        </div>
        <div style="display: table-cell;">
          <div style="width:100px; background-color:#0000ff; height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var width = document.getElementById('inner').parentNode.offsetWidth;
    console.log(width);
  </script>
  </body>
</html>

最佳答案

为了使 overflow: hidden; 正常工作，您必须明确设置元素的尺寸。所以，是的，抱歉，您必须在 blockquote 上指定宽度。

如果允许，您可以使用 javascript 确定具有设置宽度的父元素的宽度，然后相应地设置 blockquote 的宽度。

这是一个使用您当前的标记的示例:

var root = document.getElementsByTagName('div')[0],
    block = document.getElementsByTagName('blockquote'),
    i;

for (i = 0; i < block.length; i += 1) {
    block[i].style.maxWidth = root.style.width;
}

Demo

但是，如果您为具有设置宽度的 div 提供一个类名或 ID，这将得到极大改善。查看this fiddle看看它是如何工作的。

关于css - 如何在 <blockquote> 中剪辑 <img>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16673953/