You need to wrap the img block in the parent block. Then in the parent block to set the minimum height, and in the img block to specify width of 100%. This will preserve the aspect ratio of the image, and its height will be either greater or as the parent, but not less than that set in the parent block. Of course, the parent block must inherit the entire screen width from its parent block or explicitly have a width of 100%. For example:

.block__image {
    /*width: 100%;*/
    min-height: 300px;
}

.block__image img {
    width: 100%;
}

<div class="block__image">
  <img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>

I am trying to insert full width hero image. Problem is based on the original height of the image, it’s getting too short on mobile device.

Large Screen:

Mobile Screen:

Basically, I wanted little bit bigger height than the calculated height on mobile screen. So, I thought it would be good if I apply a min-height to the image.

So, I have added this:

img {
  min-height: 300px;
}

Surely, it’s not the way.

How to fix this?

Code Demo