如何在不提高度的情况下在CSS中显示正确的图像

Question

我想通过CSS显示图像。但它没有正确显示。任何人都可以帮助我知道如何在我们的浏览器中显示全尺寸图像而不给出坝高属性。

提前致谢。

这是我的标记：

<div class="Main_Content">
    <div class="Slider">
    </div>

这是CSS（不工作）

.Main_Content {
    width: 100%;
}

.Slider {
    background-image: url("Construction%20Company/Stock%20Images/MG_5194-e1348062448312.jpg");
    display: flex;
    float: left;
    height: 300px;
    position: unset;
    width: 100%;
}

Answer 1

.Slider {
background-size:cover;
background-repeat:no-repeat;
}

将完成这项工作。它会尝试使图像变大，直到达到全屏。

有关详细信息，请参阅background-size property on MDN。

Answer 2

不使用高度，

<img> 

标签。这肯定会解决您的问题。