Consider this example:
.row {
background: #F88;
margin-top: 20px;
}
.cont {
display: block;
height: 82px;
width: 82px;
background-color: #0AF;
}
.txt {
background-color: #0C0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row no-gutters">
<div class="col-auto"><div class="cont">82px</div></div>
<div class="col-auto"><img src="https://i.imgur.com/WIxmfZb.png" /></div>
<div class="col"><div class="txt">Text content</div></div>
</div>
</div>I am looking to resize a 100x100 image to match the height of the adjacent column while preserving its aspect ratio.
I have tried various combinations of CSS properties like flex-basis and flex-shrink without success. One approach involved setting the image's style to height: 0; min-height: 100%;, but it caused issues in Chrome and did not work in IE.
- The initial width of the image became 0 in Chrome until window resizing.
- The method did not function properly in IE.
- It seemed like an overly complicated solution that would confuse future developers.
After spending hours trying different solutions, I still haven't found one that meets all the requirements:
- The image fills 100% of the container's height.
- The aspect ratio remains unchanged.
- No overflow occurs.
- Absolute positioning is avoided.
- The image size is not explicitly set.
The desired outcome is illustrated here:
https://i.sstatic.net/SJ5N0.png
Any assistance on achieving this goal would be greatly appreciated.