一旦我将其包装在 div 中，图像就会消失答案

【问题标题】：Image disappears as soon as i wrap it in a div一旦我将其包装在 div 中，图像就会消失
【发布时间】：2021-03-14 06:23:34
【问题描述】：

我不明白以下行为：

  <div class="ad-img">
    <img src="assets/pictures/SmartDriver.jpg" alt="Smart Driver">
  </div>

如果我将图像放在 div 容器中，带有图像的 div 容器将完全消失。它出现在浏览器的元素部分，但即使我将鼠标悬停在元素上也不会显示在任何地方

我还给 div 元素一个宽度和一个高度

.ad-img {
  width: 20rem;
  height: 20rem;
}

另外：

这个 div 用第二个 div 包裹在一个 flexbox 中，而第二个带有文本和按钮的显示正常

.ad-img {
  width: 20rem;
  height: 20rem;
}

<div class="ad-img">
  <img src="assets/pictures/SmartDriver.jpg" alt="Smart Driver">
</div>

【问题讨论】：

您需要发布链接或更多代码。有很多可能性
设置一个有效的 sn-p 来演示您的问题、您的 flexbox 和子项以及附加的规则 ... 涉及的 flex-grow 是 display:none 等等。有很多原因会使图像缩小到无或不扩展其父级...
我将您的代码变成了 sn-p ，请对其进行编辑并添加缺少的内容以向我们展示您的问题，以便我们提供帮助
你能在一些小提琴中复制它吗？

标签： html css image flexbox

【解决方案1】：

.box {
    display: flex;
}

.ad-img {
    width: 20rem;
    height: 20rem;
}

<!-- AS FAR AS I CAN TELL YOU HAVE SOMETHING LIKE THIS. PICTURE, TEXT, BUTTON -->

<div class="box">
    <div class="ad-img"><img src="https://seeklogo.com/images/S/smart-driver-logo-7D11F819D2-seeklogo.com.png" alt="Smart Driver"></div>
    <div>Text in div 2</div>
    <div><button type="button">Click Me!</button></div>
</div>

【讨论】：

【解决方案2】：

这个问题可能不是由于代码本身，而是由你的 div 的类名：ad-img，然后在渲染阶段的某个地方，一个特定的代理阻止了它。 p>

第一种可能性：如果您在VS Code 中编码并激活了Live Server 扩展，并使用Open with Live Server 测试代码。它可能在呈现代码之前阻止了<div>。您可以尝试直接在浏览器中打开 .html 文件，以确认此原因。

第二种可能性：浏览器特定的广告拦截浏览器扩展，将ad-img 类识别为不需要的第三方广告，并拦截了整个<div> 的内容。您可以尝试暂停扩展并参考您的页面以确认此原因。

为避免此问题，您可以为包裹<img> 的父元素指定除ad-xxx 之外的其他名称。

【讨论】：