Блог

Главная - Вопросы по программированию - Изображение исчезает, как только я оборачиваю его в div

Изображение исчезает, как только я оборачиваю его в div

#html #css #image #flexbox

#HTML #css #изображение #flexbox

Вопрос:

Я не понимаю поведение следующего:

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

Если я помещаю свое изображение внутри контейнера div, контейнер div с изображением полностью исчезает. Оно появляется в разделе «Элементы» браузера, но нигде не отображается, даже когда я навожу курсор мыши на элемент

Я также присваиваю элементу div ширину и высоту

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

Дополнительно:

Этот div оборачивается вторым в flexbox, тогда как второй с текстами и кнопками отображается нормально

 .ad-img {
  width: 20rem;
  height: 20rem;
} 
 <div class="ad-img">
  <img src="assets/pictures/SmartDriver.jpg" alt="Smart Driver">
</div>

Комментарии:

1. вам нужно разместить ссылку или больше кода. Есть много возможностей

2. установите рабочий фрагмент , чтобы продемонстрировать вашу проблему , ваш flexbox и дочерние элементы , а также прилагаемые правила … задействован ли flex-grow, это отображение: не задействовано и так далее. существует много причин , по которым изображение может быть уменьшено до нуля или не расширять его родительский элемент …

3. я превратил ваш код в фрагмент кода, пожалуйста, отредактируйте его и добавьте то, чего не хватает, чтобы показать нам вашу проблему, чтобы кто-то мог помочь

4. не могли бы вы, пожалуйста, воспроизвести его в некоторых скриптах?

Ответ №1:

Вероятно, эта проблема связана не с самим кодом, а скорее с именем класса вашего div: ad-img , затем где-то на этапе рендеринга конкретный агент заблокировал его.

1-я возможность: если вы кодируете в VS Code с активированным расширением Live Server и тестируете код Open with Live Server . Возможно, он заблокировал <div> до рендеринга кода. Вместо этого вы можете попробовать открыть файл .html непосредственно в браузере, чтобы подтвердить эту причину.

2-я возможность: специфичное для браузера расширение для блокировки рекламы, которое распознало ad-img класс как нежелательную стороннюю рекламу и заблокировало содержимое всего <div> . Вы можете попытаться приостановить расширение и перейти на свою страницу, чтобы подтвердить эту причину.

Чтобы избежать этой проблемы, вы можете дать другое имя, чем ad-xxx родительскому элементу, который обертывает ваш <img> .

Ответ №2:

 .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>