阻止图片自动撑开div

当你在一个`<div>`容器内嵌入图片时，如果图片的尺寸大于容器，它可能会导致`<div>`自动调整大小以容纳图片。为了避免这种情况，你可以使用CSS来设置一些规则来限制图片的宽度或高度，并将其保持在容器内。

下面是一个简单的示例，展示了如何使用CSS的`max-width`属性来阻止图片超出其父容器：

img {
  max-width: 100%; /* 或者设置为具体的百分比值，如100%, 80%等 */
  height: auto; /* 让图片按比例缩放，保持原始宽高比 */
  display: block; /* 确保图片居中显示 */
  overflow: hidden; /* 如果图片超出了容器，隐藏超出部分 */
}

在这个例子中，`max-width: 100%`会让图片的最大宽度等于其容器的宽度，而`height: auto`会让图片的高度根据宽度自动调整。这样就可以防止图片撑开`div`了。

如果你想要图片始终保持原尺寸，并仅在需要时显示滚动条，那么可以使用`object-fit: contain`，它会将图片内容填充到容器内，如果图片溢出则会显示滚动条：

img {
  object-fit: contain;
  overflow: auto;
}

相关问题

textarea高度自动撑开

可以使用以下代码来实现`textarea`的高度自动撑开：

textarea {
  overflow: hidden; /* 隐藏滚动条 */
  resize: none; /* 禁止拖拽调整大小 */
  height: auto; /* 高度自动撑开 */
  min-height: 50px; /* 最小高度 */
}

其中`min-height`属性可以设置`textarea`的最小高度，当内容较少时，`textarea`的高度也不会太小。而`height`属性设置为`auto`时，`textarea`的高度会根据内容自动撑开。

需要注意的是，当`textarea`中存在多行文本时，若其中一行文本太长，会自动换行，造成高度计算不准确的问题。因此建议使用JavaScript来实现更为精确的自适应高度。可以参考第三方库如：autosize.js。

iframe高度自动撑开

如果你想要让 iframe 的高度自动撑开以适应内容的高度，可以使用以下的方法：

1. 使用 JavaScript 自动计算高度

可以通过 JavaScript 获取 iframe 内容的高度，然后设置 iframe 的高度。具体代码如下：

var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
iframe.style.height = innerDoc.body.scrollHeight + 'px';

这段代码会获取 id 为 myiframe 的 iframe 元素，然后获取它内部文档的高度，最后将 iframe 的高度设置为文档高度。

2. 使用 CSS 的 height: auto 属性

在 CSS 中，可以将 iframe 的高度设置为 auto，这样 iframe 将会自动根据内部内容的高度进行撑开。具体代码如下：

iframe {
  height: auto;
}

这种方法比较简单，但是需要注意的是，某些浏览器可能不支持该属性。