如何解决图像高度失真 相关代码
我正在创建一个简历网站。我正在向Job.js
组件添加内容,并且遇到徽标问题。 当desc超过组件的高度时,高度似乎会扩大。如果desc太短,则不会出现此问题。当flex-direction为column时,我也没有这个问题。
我尝试调整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;
}
解决方法
我通过向align-self: start;
添加.job-container img
解决了这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。