0

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>
neaumusic
  • 10,027
  • 9
  • 55
  • 83
  • To get rid of the red space underneath the image add `vertical-align: bottom` to the img css. – schmauch Mar 31 '22 at 07:45
  • @schmauch aside from the box model showing it off, I noticed at very small width/height that the anchor is larger than the image because there's a minimum font size of 6px iirc – neaumusic Mar 31 '22 at 17:05

1 Answers1

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>
alirizvi19
  • 167
  • 5