Ggtcf

I want to place an image inside div such that it fits completely. Now it just clips the image if it's more than the width of the div containing it (image_div).
Below is the code,

<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;
 

How can I place the complete image inside the div containing it? Could someone help me with this? Thanks.

If you're looking to maintain the ratio of the image so that it doesn't appear stretched (as it doesn't seem to be clear whether that's the case or not), there is an alternative option to using the image as a background-image:

 img 
 width:auto;
 height:auto;
 max-width:105px;
 max-height:105px;
 

<img src="https://via.placeholder.com/150x100">
This is originally 150x100 but is reduced down to 105 (the max-width) x 70 as per the above css.

you have put className in the div like this <div className="image_div">

the className is not an attribute the right attribute is just class so you should put it as <div class="image_div"> and <div class="form_fields">

You can give your image_div a background-image with the URL of the src that's in your example.

image_div 
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 105px;
 height: 105px;
 background-image: url('some-link');

Just ensure that you're paths are correct, as in some scenarios the path (if you're hosting the image) may differ between how you would write in on your page and in your css file.