I've been facing some challenges while working on a responsive website, particularly with getting the sizing right.
When viewing my image on mobile, everything looks good:
https://i.sstatic.net/gNm14.png
However, when I switch over to desktop view, the image appears too large.
https://i.sstatic.net/4u0io.jpg
Here's how I want the image to behave:
On mobile, it should remain at the bottom of the screen as it currently is.
On desktop, I'd like the image to be positioned in the bottom right corner of the viewport within the red rectangle I've outlined. It should resize responsively without fixed dimensions.
The following HTML code is relevant:
<section class="page_hero-section__MZdi7">
<div class="page_hero-con__ijIdx">
<a>particulieren</a>
<h2>(zorg-)organisaties</h2>
<p>Ontlast de werkvloer. Onze x komen op locatie en zorgen voor een stralende lach voor clienten én medewerkers.</p>
<button>werkwijze</button><button>get started</button>
</div>
<div class="page_hero-join-con__AkBR0">
<Image alt="cool girl with colorful glasses"
src={coolGirlGlasses}
\>
<div>
<p>werken bij ons?</p>
<span>
<hr>
</span>
<a>join the crew</a>
</div>
</div>
<div class="page_hero-werkwijze__IoSuu">
<p>werkwijze</p>
<div class="page_hero-werkwijze-line__ccNUj"></div>
</div>
</section>
And here's the relevant CSS code:
.hero-section {
position: relative;
display: flex;
height: calc(100vh - var(--header-height));
flex-direction: column;
justify-content: space-between;
}
img {
display: block;
max-width: 100%;
height: auto;
}
Setting the image height to 100% results in it being larger than its container. I've also attempted using object-fit: contain but that didn't make any difference.