Is there a way to ensure that an image fits perfectly inside a div without being clipped? Currently, the image gets cut off if it exceeds the width of the containing div (image_div). Below is the code snippet in question:
<form>
<div className="form_fields">
<span className="required">Viewpoint</span>
<a>anchor tag</a>
<div className="image_div">div containing image
<img src="somelink"/>
</div>
</div></form>
form {
flex-grow: 1;
display: flex;
flex-direction: column;
.form_fields {
padding: $padding $gutter $padding $gutter;
background-color: #fff;
position: relative;
top: 0px;
left: 0px;
overflow: auto;
flex-grow: 1;
.image_div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 105px;
height: 105px;
img {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}}}
I am looking for assistance on how to ensure that the entire image fits inside the container div. Any advice or guidance would be greatly appreciated. Thank you.