CSS <a> with <img> expand to fill space [duplicate] - css

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 11 months ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
Run the code snippet below, drag to resize smaller and larger - vertically and horizontally. Note that the image will resize to the smaller of it's natural dimensions or the extrinsic box size, which isn't it's direct <a> parent but the <div> above
This is nearly perfect, but I can't figure out the tiny details, easily identifiable in DevTools by hovering the <a> element (none of the red background should be visible)
I need the anchor to cover the <img>, which is restricted in size by the #extrinsicSize div
I also have issues with working solutions when it comes to Firefox and Safari, my best attempt was using a vertical flex box with justify/align start
div#someParent {
height: 100px;
width: 200px;
resize: both;
overflow: auto;
background: lightgrey;
padding: 5px;
}
div#extrinsicSize {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
a {
background: red;
}
img {
background: lightgreen;
display: inline-block;
max-height: 100%;
max-width: 100%
}
<div id="someParent">
<div id="extrinsicSize">
<a href>
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1488264559/cbgqpe9icin2ntbpguyc.png" />
</a>
</div>
</div>
<div>
--------------------- Drag to resize ^
</div>

Answer 1

I fix your css. Please kindly check below if you like or not.
div#someParent {
height: 100px;
width: 200px;
resize: both;
overflow: auto;
background: lightgrey;
padding: 5px;
}
div#extrinsicSize {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
a {
background: red;
display: block;
width: 100%; height: 100%;
}
img {
background: lightgreen;
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="someParent">
<div id="extrinsicSize">
<a href>
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1488264559/cbgqpe9icin2ntbpguyc.png" />
</a>
</div>
</div>
<div>
--------------------- Drag to resize ^
</div>