Solution 1 :

You can use object-fit: cover.

If you additionally need to specify image position, use object-position: center center.

Please note, that these attributes are unavailable in older browsers.

If you need to support older browsers you can use div tag instead of img and style its background (image, position, size, fitting).


Solution 2 :

You need the container to be a grid with 2 equal columns of 1fr each and the width and height to be 100% of the visible viewport. Then your image needs to have a max-width in order to fit nicely into its container without requiring more space than what the parent decides.

* {
  margin: 0;
  padding: 0;

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr 1fr;

.div-block-87 img {
  max-width: 100%;
<div class="container">
  <div class="div-block-87">
   <img src="">
  <div class="div-block-88">other block</div>

Problem :

I’m new to CSS, and, as my technical expertise is not quite good, I will try to explain as simply as I can.
I have an image that uses half of the screen I’m using the below CSS code after reading a couple of articles

<div class="div-block-87">
  <img src="image.jpg" alt="">
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  height: auto;

The problem is that image is cut like below:

While when I use inspect image shown as expected, see below:

Sorry, if my description is terrible but I do not know how else to explain.


Comment posted by Yuriy Yakym

Added a demo to my answer. Please check.

Comment posted by Uttam

If you wanna give height that fills the full screen then try giving height to 100vh .

Comment posted by paniklas

Thank you both for help! I tried Yuriy’s suggestion but this didn’t solved my issue. I used different combinations just to check how it works but with no result. I then used