The below code will help you process view of CSS in Image, using css object-fit property and calc function with 100vh
Always fix the image on view screen resolution
.responsive-image {
height: calc(100vh – 140px); max-width: 100%;
width: 100%;
}
<div class=”modal-body” id=”modal-body” style=”width: 100%;”>
<div class=”row”>
<div style=”text-align: left;”>
<img class=”image-control responsive-image ” ng-src=”{{srcImg}}” alt=”Alternate Text” ng-style=”myObj” />
</div>
</div>
</div>
– 100vh: full screen
– calc: calculator the number of screen resolution
Object-fit property
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.
Look at the following image from Paris, which is 400×300 pixels:
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
<h2>object-fit: fill (this is default):</h2>
<img class=”fill” src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
<h2>object-fit: contain:</h2>
<img class=”contain” src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
<h2>object-fit: cover:</h2>
<img class=”cover” src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
<h2>object-fit: scale-down:</h2>
<img class=”scale-down” src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
<h2>object-fit: none:</h2>
<img class=”none” src=”paris.jpg” alt=”Paris” style=”width:200px;height:400px”>
Reference:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all
Any feedback leave your comment, we can discuss about it!
Zidane