Question

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

我尝试将CSS中图像的宽度设置为width: 100%，但这给了我：图片1：https://ibb.co/9yKJgvF

如果我删除该属性，它将为我提供：图片2：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

首先不要为此目的使用浮点数，请使用绝对布局

删除.img中的浮动

在.container中添加

position: relative;
z-index: 0;

在.img中添加

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

这会拉出我建议根据图像使用的图像.....

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

标头中的图片放置不正确

1 个答案: