首页 > 解决方案 > HTML中的图像不显示

问题描述

我遇到了一个奇怪的问题。我有两次类似的代码来显示图像,但其中一次显示图像,另一次不显示。

这是我的代码:

                <div id="blocMethodo">
                    <div id="divTitreMethodo">
                        <p class="texteTitreListeComportements">
                            Notre méthodologie
                        </p>
                    </div>
                    <div class="divVideoUn">
                        <div class="carteVideoUn">
                            <video autoplay="true" muted loop="true" poster="/Images/Methodologie900.jpg" id="videoDeux">
                                <source src="../Videos/videoprocesssfondgris.mp4">
                            </video>
                        </div>

                    </div>
                    <div class="divImagePricing">
                        <img src="../Images/Methodologie900.jpg" alt="Methodologie" id="imageMethodo"/>
                    </div>
                </div>

                <div id="blocPricing">
                    <div id="divTitrePricing">
                        <p class="texteTitreListeComportements">
                            Pricing
                        </p>
                    </div>
                    <div id="divTextePricing"
                        <p class="premiertexte">
                            Notre tarif s'établit en fonction du nombre de personnes travaillant pour votre organisation.
                        </p>
                    </div>
                    <div class="divImagePricing">
                        <img src="../Images/Pricingsanstitre900.jpg" alt="Pricing" id="imagePricing"/>
                    </div>

                </div>

和下面的 CSS

#blocMethodo
{
  width: 350px;
  height: 290px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #261939;
  border-radius: 10px;
}

#divTitreMethodo
{
  width: 340px;
  height: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items:flex-start;
  justify-content: center;
}

#imageMethodo
{
  max-width: 100%;
}

#blocPricing
{
  width: 350px;
  height: 340px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #261939;
  border-radius: 10px;
}

#divTitrePricing
{
  width: 340px;
  height: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items:center;
  justify-content: space-around;
}

#divTextePricing
{
  width: 340px;
  height: 50px;
  display: flex;
  align-items:flex-start;
  justify-content: flex-start;
}

.divImagePricing
{
  width: 340px;
  height: 200px;
  background-color: yellow;
}

#imagePricing
{
  max-width: 100%;
}

与所有

'video' Div (divVideoUn, carteVideoUn, videoDeux) 设置为显示:无;

因为我在我的 CSS 的“智能手机”部分。

我的问题是,在第一个块中,图像 Methodologie900.jpg 没有显示,我只看到黄色矩形(divImagePricing 类的背景)。第二张图片显示完美,尽管我认为它是相同的代码。当然,我检查了我的图像的存在、扩展名和拼写,我什至复制/粘贴了链接 Pricingsanstitre900.jpg 来代替第一张图像的链接,但这并没有帮助。

标签: htmlcssimage

解决方案


在“#blocmethodo”上替换这一行:

height: 290px;

有了这个

min-height: 456px;


推荐阅读