Fix image height to 150px css

Question

How can I auto fit an image in a div. I have a div inside which there is an image. If the image is big then it takes up half of the screen. I want it so that the image is shrunk and fits in a div of 150px or so. So as along as the image has a height of 150px, then the image will fit in the box. if it is bigger then it should shrink.

I tried:

.crop {
  height: 150px;
  overflow: hidden;
  position: absolute;
}

But doesnt work. I also tried max-width: 1fr `

Please go read [ask], and how to create a [mcve]. _“I also tried `max-width: 1fr`”_ - `fr` is for working with CSS grids, you can not use it in other contexts. Also, why max-width, when you were talking about the image _height_ so far? — CBroe, Feb 07 '18 at 12:29

score 3 · Accepted Answer · answered Feb 07 '18 at 12:21

3

You can apply the size limitation to the image itself. See below. Hope that helps.

.crop img {
  max-height: 150px;
  width: auto;
}

<div class="crop">
  <img src="http://via.placeholder.com/350x350">
</div>

answered Feb 07 '18 at 12:21

Gerard

15,418
5
30
52

score 1 · Answer 2 · answered Feb 07 '18 at 12:19

1

.crop {
    height: 150px;
    max-height:150px
    overflow: hidden;
    position: absolute;
  }

answered Feb 07 '18 at 12:19

Sudhakar

324
3
9

Can you explain a little bit about the result of this code? In that case does he even need the `height` property at all? – Narxx Feb 07 '18 at 12:20
max height should work for you, if it is not working please provide snippet of your code, so that we can help more. – Sudhakar Feb 07 '18 at 12:20
I'n not the OP. I'm just asking about the combination of `height` and `max-height` having the same value... – Narxx Feb 07 '18 at 12:21
@Tee F, this can help you https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Sudhakar Feb 07 '18 at 12:24

Rupal · Answer 3 · 2018-02-07T12:35:31.297

1

You can use object-fit:contain like:-

 .crop img{
    object-fit:contain;
  }

edited Feb 07 '18 at 12:35

answered Feb 07 '18 at 12:20

Rupal

1,111
6
16

Bhuwan · Answer 4 · 2018-02-07T12:28:46.720

1

You have to apply height:100% to the image

Stack Snippet

.crop {
  height: 150px;
  overflow: hidden;
  position: absolute;
}

.crop img {
  height: 100%;
}

<div class="crop">
  <img src="http://via.placeholder.com/600x300" alt="">
</div>

edited Feb 07 '18 at 12:28

answered Feb 07 '18 at 12:21

Bhuwan

16,525
5
34
57

Where is crop img being called? – Tee F Feb 07 '18 at 12:26
@TeeF apply `height:100%` to the image and `max-width:100%`..it will automatically fit into the 150px height div – Bhuwan Feb 07 '18 at 12:28

score 1 · Answer 5 · answered Feb 07 '18 at 12:21

.crop {
    height: 150px;
        width: 150px;
    overflow: hidden;
    position: absolute;
  }
        .crop img{
            width: 100%;
        }

 <div class="crop">
        <img src="https://m.guardtime.com/photos/tech_image.jpg">
    </div>

davecar21 · Answer 6 · 2018-02-07T13:03:45.000

So as along as the image has a height of 150px, then the image will fit in the box.

You can try using object-fit

Sample below using object-fit:cover will fill the image in the .crop container. It will maintain its aspect ratio but but often cropping the image .

.crop{
  height:150px;
  width:150px;
}

img {
  height: inherit;
  width:inherit;
  object-fit: cover;
}

<div class="crop">
  <img src="http://via.placeholder.com/350x550" alt="">
</div>

Alternative if you want just the image to follow only the height of the container and maintain it's aspect-ratio. you can use object-fit:contain. Just don't set the width of the container.

.crop{
  height:150px;
}

img {
  height: inherit;
  width:inherit;
  object-fit: contain;
}

<div class="crop">
  <img src="http://via.placeholder.com/350x550" alt="">
</div>

Fix image height to 150px css

6 Answers6