Why is this image so greedy in height in Safari? I have seen the other posts on Safari grid height issue, but here nothing seems to work. I’ve tried display: grid and max-height on parent. I suppose the only option would be to switch to max-height image or flex.
.parent {
max-width: 1500px;
margin: auto;
}
.container {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 20px;
align-items: center;
}
.left {
grid-column: span 3 / span 3;
}
.right {
grid-column: span 2 / span 2;
}
img {
height: 100%;
max-width: 100%;
object-fit: cover;
}<div class="parent">
<div class="container">
<div class="left">
<h2>Test it out</h2>
<p>Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening </p>
<p>Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening </p>
<p>Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening </p>
</div>
<div class='right'><img src="https://wallpapercave.com/wp/wp8111763.jpg" class=""> </div>
</div>
</div>
</div>
I think the answer here is actually height: auto or no height property at all. In my case it’s needed to differentiate from mobile styling class.