html - 页眉中的图像未正确放置

Question

需要图像来填充 .container 类中的剩余空间

我已经尝试在 CSS 中将图像的宽度设置为 width: 100%，但它给了我这个:图一:https://ibb.co/9yKJgvF

如果我删除那个属性，它会给我这个:图二:https://ibb.co/K0HpkvJ

HTML

<header>
    <div class="container">
        <div id="logo_container">
            <h1>Hotel<span>Inn</span></h1>
        </div>
        <img src="../images/sample1.jpg" alt="Image of Hotel">
    </div>
</header>

CSS

header{
    width: 100%;
    height: 100px;
    display: block;
    background-color: lightblue;
}

.container{
    width: 80%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: white;
}

#logo_container{
    height: 100%;
    display: table;
    float: left;
}

#logo_container h1{
    display: table-cell;
    vertical-align: middle;
}

.container img{
    height: 100%;
    float: right;

我试图使图像的高度与图 2 中的高度相同，而图像将填满其余空间，直到它触及“HotelInn”​​字样

Answer 1

首先不要为此目的使用 float 使用绝对布局

去除 .img 中的 float

在.container中添加

position: relative;
z-index: 0;

在.img中添加

 position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    z-index: 0;

这将拉伸(stretch)出我建议根据它使用图像的图像.....

如果您想以完美的比例拉伸(stretch)图像，请使用 height : auto并在 .container 中添加 overflow : hidden