Solution 1 :

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="" alt="image error">

Problem :

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:

enter image description here

Mobile Screen:

enter image description here

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.

enter image description here

How to fix this?

Code Demo


Comment posted by shim-kun

You could add object-fit: cover; to the img. Another option, instead of adjusting the img, would be to change your font-size using a media query for smaller devices

Comment posted by user1896653

I have already change font-size using a media query. Adding

Comment posted by

what about using vw units for the font-size:

Comment posted by user1896653

I want min-height for that block like last screenshot; but without getting squashed of the image.