文本框对齐旁边的图像答案

【问题标题】：Image next to text box alignment文本框对齐旁边的图像
【发布时间】：2020-10-04 05:20:52
【问题描述】：

我确定这是一个相对简单的问题，但经过一番摆弄后我没有找到太多运气，会解决一件事然后出现另一个问题。正如您在下面看到的（这是在桌面上，移动设备完美）文本框太大，在文本下方留下大量空白，有些图像尺寸合适，有些太大，顶部的看起来最好。想法是图像跨越一侧，然后文本框旁边的高度相同。

这是手机的图片供参考

我不会链接所有的 HTML 和 CSS，只是相关的东西。欢迎和赞赏任何建议。

<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <meta charset="utf-8" >
    <meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
    <meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="autor" content="Descisive Development">
    <link rel="stylesheet" href="styles.css">
    <title>Jordan Squires, Home</title>
</head>
<body >
    <nav class="navbar">
        <a href=" /"class="logo">Jordan Squires</a>
        <input class="menu-btn" type="checkbox" id="menu-btn" />
        <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
            <ul class="menu">
                <li class="navitem"> <a href="index.html">Home</a></li>
                <li class="navitem"> <a href="about.html">About</a></li>
                <li class="navitem"> <a href="clients.html">Clients</a></li>
                <li class="navitem"> <a href="blog.html">Blog</a></li>
                <li class="navitem"> <a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="home-hero">
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio1.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jordan</h1>
            <h2>MMA Instructor</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="flex-container" id="even">
        <div class="img-hero">
            <img src="images/portfolio2.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Shotokan Karate</h1>
            <h2>Black Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio3.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jeet Kune Do</h1>
            <h2>Black Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    <div class="flex-container"id="even">
        <div class="img-hero">
            <img src="images/portfolio4.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Brazilian Jiu Jitsu</h1>
            <h2>Purple Belt</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    <div class="flex-container">
        <div class="img-hero">
            <img src="images/portfolio5.jpg" alt="">
        </div>
        <div class="info-hero">
            <h1>Jordan</h1>
            <h2>MMA Instructor</h2>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</section>
</body>
</html>

和css

    box-sizing: inherit;
    margin: 0 auto;
    padding: 0;

}

html{
    font-size: 10px;
    max-width: 1300px;
    box-sizing: border-box;
}

body{
    background: var(--white);
}

a{
    color: var(--main-txt);
    text-decoration: none;
}

:root{
    --white: #F1FAEE;
    --outline-color: #000000;
    --bg-color: #1D3557;
    --main-txt: #457B9D;
    --alt-txt: #A8DADC;
    --red: #E63946;

    --ff: 'Montserrat', sans-serif;
    --ff2: 'Poppins', sans-serif;

    --fw-l: 300;
    --fw-n: 400;
    --fw-m: 600;
    --fw-b: 700;

    --fs-1: ;
    --fs-2: ;
    --fs-3: ;
    --fs-p: ;

    --shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}

/*global style container*/

.container{
    max-width: 1360px;
}

/*Navbar styles*/

.navbar{
    box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
    width: 100%;
    font-size: 1.8rem;
    font-family: var(--ff2);
}

.navbar ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.navbar ul a{
    display: block;
    padding: 2rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--fw-n)
}

.navbar ul a:hover{
    background-color: var(--bg-color);
    color: var(--white);
}

.navbar .logo{
    float: left;
    display: block;
    font-size: 2rem;
    padding: 1.5rem;
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.5rem;
}

.navbar .menu{
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

.navbar .menu-icon{
    padding: 2.8rem 2rem;
    position: relative;
    float: right;
    cursor: pointer;
}

.navbar .menu-icon .nav-icon{
    background: var(--bg-color);
    display: block;
    height: .2rem;
    width: 1.8rem;
    position: relative;
    transition: background .2s ease-out;
}

.navbar .menu-icon .nav-icon:before{
    background: var(--bg-color);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: .5rem;
}

.navbar .menu-icon .nav-icon:after{
    background: var(--bg-color);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -.5rem;
}

.navbar .menu-btn{
    display: none;
}

.navbar .menu-btn:checked ~ .menu{
    max-height: 36rem;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
    background: transparent;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
}

.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
}

/*Homepage main section*/
.home-hero{
 margin: 1rem auto;
}

.flex-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.img-hero{
    width: 90%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-bottom: -3px;
}

.info-hero{
    width: 90%;
    font-family: var(--ff);
    border:  1px solid var(--outline-color);
    padding: 3rem;
    background-color: var(--bg-color);
}

/*Image styles*/
.img-hero img{
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
    margin-bottom: -3px;
    border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
    font-size: 3rem;
    color: var(--white);
}

.info-hero h2{
    font-size: 2rem;
    font-style: italic;
    color: var(--red);
}

.info-hero h1 h2{
    font-family: var(--ff2);
}

.info-hero p{
    font-size: 1.2rem;
    text-align: justify;
    color: var(--alt-txt);

}
/*Media for Navbar*/

@media (min-width: 760px) {
    .navbar{
        height: 6.7rem;
    }

    .navbar li{
        float: left;
    }
    .navbar li a{
        padding: 2rem 2.5rem;
    }
    .navbar .menu{
        clear: none;
        float: right;
        max-height: none;
    }

    .navbar .menu-icon{
        display: none;
    }

    .navbar .logo{
        padding: 2rem;
    }

    .flex-container{
        flex-direction: row;
        margin: 2rem auto;
    }

    .img-hero{
        width: 50%;
        margin: inherit;
    }

    .info-hero{
        width: 45%;
        padding: 2rem;

    }

    #even{
        flex-direction: row-reverse;
    }
}

【问题讨论】：

如果您的所有 css 代码都已发布，因为顶部似乎已经切断了边距的一个元素：1rem。但是，如果我不得不从那里猜测它会是 .info-hero 类中的填充：3rem。尝试删除或减少它，看看它是否有帮助。
我没有意识到文本会显示在滚动框架中，我现在已经添加了所有的 HTML 和 CSS。感谢您的帮助

标签： html css layout responsive-design alignment

【解决方案1】：

这是我刚刚为您编写的一个简单示例，您可以根据需要进行调整。

.flex-container {
  display: flex;
  margin-bottom: 1rem;
}

.img-hero, .info-hero {
  max-width: 50%;
}

.img-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-hero {
  background: violet;
  color: white;
}

.info-hero > * {
  padding: 0.5rem 1rem;
}

<div class="flex-container">
  <div class="img-hero">
    <img src="https://picsum.photos/900/700" alt="">
  </div>
  <div class="info-hero">
    <h1>Jordan</h1>
    <h2>MMA Instructor</h2>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <br>
      <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="flex-container">
  <div class="info-hero">
    <h1>Jordan</h1>
    <h2>MMA Instructor</h2>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <br>
      <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <div class="img-hero">
    <img src="https://picsum.photos/800/600" alt="">
  </div>
</div>

【讨论】：

感谢您提供的信息，据我所知，您减少了填充并将空间共享了 50/50 % 的宽度？这会导致图像被压扁或没有文字填充的大空间？