css Div调整大小以适合图像

我仍然在完成页面的其余部分的过程中，但我有一个非常小的问题。问题是我的图像div与容器的高度不一样。图像大小合适，图像div只是小了一点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="container">
    <div id="image">
        <img src="halie-west-25xggax4bSA-unsplash.jpg" alt="leaves and trees">
    </div>
    <div id="form">
        <fieldset id="info">    
            <h1>Let's do this!</h1>

            <div class="row">
                <div class="column">
                    <label for="first-name">First Name</label>
                    <input type="text" required id="first-name">
                </div>

                <div class="column">
                    <label for="last-name">Last Name</label>
                    <input type="text" id="last-name">
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="email">Email</label>
                    <input required type="email" id="email">
                </div>

                <div class="column">
                    <label for="phone-number">Phone Number</label>
                    <input type="number" required id="phone-number">
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="password">Password</label>
                    <input type="password" required id="password">
                </div>

                <div class="column">
                    <label for="confirm-password">Confirm Password</label>
                    <input type="password" required id="confirm-password">
                </div>
            </div>
        </fieldset>
        <div id="submit-button">
        <button id="submit" type="submit" method="post">Submit</button>
        </div>
    </div>
    </div>
</body>
</html>

字符串
我的CSS：

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#form {
    
    position: absolute;
    display:inline-block;
    width: 100%;
       
}

#info {
    width: 100%;
    border: none;
    box-shadow: 0 20px 20px -20px black;
    
}

.row {
    display: flex;
    justify-content: left;
}

#info h1{
    text-align: left;
}
.column{
    margin:10px;
}

.column label{
    display: block;
    text-align: left;
    padding:5px;
    
}
#info input{
    
    align-items: end;
}
#submit{
    height: 3rem;
    width:12rem;
    margin: 3rem 0 0 3rem;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
#image{
    position: relative;
    width: 35%;
    height: 100vh;
    display: inline-block;
   
    
}
#image img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    
    
}
#container{
    display: inline-block;
    align-items: center;
    justify-content: left;
    height: 100%;
}

型
我只是想在我继续之前解决这个问题，因为当我完成登录页面时，它看起来不正确。我已经使用chatgpt尝试解决这个问题，我已经搜索过了，没有运气。我真的没有任何前端经验，所以这就是为什么这个小东西让我感到困惑。我相信这是一个简单的修复。

我知道你想要：

图像采取35%的宽度和其余应采取的形式
图像应该占据视口的全高
图像下方不应有空白

我针对不同的viewport dimension测试了以下内容：

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#form {
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
}

#info {
    width: 100%;
    border: none;
    box-shadow: 0 20px 20px -20px black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    margin: 10px;
}

.column label {
    display: block;
    text-align: left;
    padding: 5px;
}

#info input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

#submit {
    height: 3rem;
    width: 12rem;
    margin: 3rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#image {
    flex: 0 0 35%;
    overflow: hidden;
}

#image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#container {
    display: flex;
    flex: 1;
}

字符串

css Div调整大小以适合图像

1条答案

相关问题

热门标签

最新问答