Css 图像高度失真

我正在创建一个简历网站。我正在向

Job.js

组件添加内容，我遇到了一个徽标问题当desc超过组件的高度时，高度似乎会扩大。如果desc短，我没有这个问题。当弯曲方向为柱状时，我也没有这个问题

我尝试调整

.job container img

的

padding bottom

，但当图像恢复正常时，底部出现了不需要的填充

相关代码 Job.js

import React from 'react';

import '../css/Job.css';

function Job(props) {
  console.log(props.name);
  const jobList = props.job.map(j =>
    <div className='job-container'>
      <img src={j.logo} alt={j.alt} />
      <div className='description'>
        <div>
          <a href={j.link} rel='noopener noreferrer' target='_blank'>
            {j.companyName}
          </a>
        </div>
        <div>{j.title}</div>
        <div>{j.duration}</div>
        <div>{j.location}</div>
        <div>{j.desc.map(paragraph => <p>{paragraph}</p>)}</div>
      </div>
    </div>
  )

  return (
    <div>{jobList}</div>
  );
}

export default Job;

:root {
    --image-spacing: 30px;
}

.job-container {
    border: 2px solid red;
    padding: 0px 5%;
    display: flex;
    flex-direction: row;
}

.job-container img {
    border: 2px solid red;
    border-radius: 3px;
    display: block;
    height: auto;
    width: 35%;
}

.job-container .description {
    line-height: 1.45;
    padding-left: var(--image-spacing); /* Change this. */
}

.job-container a {
    color: black;
    text-decoration: none;
}

/* Responsive Mode */

@media only screen and (max-width: 768px) {
    .job-container {
        /* Line up description and image. */
        flex-direction: column;
    }

    .job-container img {
        border-radius: 3px;
        margin: auto;
        width: 75%;
    }

    .job-container .description {
        padding-left: 0px;
        padding-top: var(--image-spacing);
    }
}

.content {
    display: block;
}

---

我通过添加

alignself:start到
。作业容器img
你是什么意思？