图像高度失真

Question

我正在创建一个简历网站。我正在向Job.js 组件添加内容，但遇到了徽标问题。 当 desc 超过组件的高度时，高度似乎会扩大。 如果 desc 很短，我没有这个问题。当 flex-direction 是列时，我也没有这个问题。

我尝试调整padding-bottom 或.job-container img，但当图像恢复正常时，底部出现了不需要的填充。

相关代码

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;

Job.css

: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;
}

Answer 1

我通过将align-self: start; 添加到.job-container img 解决了这个问题。