Within my HTML structure:
<Col md="6">
<div className="hero-section">
<div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
<div className="front">
<div className="hero-section-content">
<h2> Full Stack Web Developer </h2>
<div className="hero-section-content-intro">
Have a look at my portfolio and job history.
</div>
</div>
<img
alt="programming welcome picture"
className="image"
src="/images/original.png"
/>
<div className="shadow-custom">
<div className="shadow-inner"> </div>
</div>
</div>
</Col>
My CSS styling for the image is as follows:
.hero-section {
h2 {
color: black;
font-weight: bold;
margin-bottom: 10px;
}
perspective: 10rem;
color: black;
font-weight: bold;
width: 40rem;
position: relative;
&-content {
position: absolute;
bottom: 20px;
width: 360px;
left: 6%;
z-index: 1;
&-intro {
font-size: 17px;
}
}
}
.image {
max-width: 100%;
max-height: 50%;
position: relative;
background-position: center;
}
After testing different configurations for the image CSS, including:
.image {
max-width: 100%;
// background-size: cover;
// max-width: 100%;
max-height: 100%;
position: relative;
background-position: center;
}
I noticed that changing the width affects the height, but my goal was to specifically adjust the height alone. This led me to try the following settings:
.image {
max-height: auto;
max-width: 100%;
background-position: center;
background-size: cover;
}
Despite these efforts, I faced challenges where the text was appearing outside the boundaries of the image. It seems that even with `max-width: 100%`, the image was not expanding as wide as expected.
This dilemma can be visualized through the following link: [https://i.sstatic.net/6fqsc.png](https://i.sstatic.net/6fqsc.png).