CODEWITHSUNDEEP
htmlcssbootstrap-4responsive-images
user1896653
user1896653

Reputation: 3327

How to add min height to html responsive image without breaking ratio for mobile screen

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

Upvotes: 1

Views: 1670

Answers (1)

Lozitsky
Lozitsky

Reputation: 183

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.sstatic.net/U1tXC.jpg" alt="image error">
</div>

Upvotes: 1

Related Questions