HTML CSS Fit image in fixed size

Question

I know this topic has been featured a couple times but none of the answers given to those questions fixed my problem. That's why I'm asking it here. I have a site where I have a standard Bootstrap card with an Image above it, But It looks like this

How can I make the images so they automatically fit in the middle and don't look like they're stretched out?

This is my HTML code (There is no CSS attached, Its standard bootstrap)

<div class="row mt-4">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-image">
                        <img class="card-img-top" src="images/example.png">
                    </div>

                    <div class="card-header">
                        <h6 class="m-0">Some text</h6>
                    </div>
                    <div class="card-body" style="height: 130px">

                        <p class="m-0">Some text</p>

                    </div>
                    <div class="card-footer">

                        Footer
                    </div>
                </div>
            </div>
</div>

with css: set width to something and height to auto (though I think by default height is set to auto) — treyBake, Feb 21 '18 at 15:18
I tried that already, That does not work. That's why I'm posting it on here — Rainier laan, Feb 21 '18 at 15:24
that should honestly work - inspect the images and see if there's other css that's setting a specific height, because otherwise the images wouldn't be stretched (unless they're ration is off in the first place) — treyBake, Feb 21 '18 at 15:26

Sensoray · Accepted Answer · 2018-02-21T17:03:55.750

1

The best thing to do is to use the image as a background in conjunction with background cover. This will allow the photo to grow and resize without looking wonky.

.card-header {
  height:200px;
  background-image:url('http://www.fillmurray.com/g/500/200');
  background-size:cover;
  background-position:center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-4">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-image">
                <img class="card-img-top sr-only" src="images/example.png">
            </div>
            <div class="card-header">
                <h6 class="m-0">Some text</h6>
            </div>
            <div class="card-body" style="height: 130px">
                <p class="m-0">Some text</p>
            </div>
            <div class="card-footer">
                Footer
            </div>
        </div>
    </div>
</div>

edited Feb 21 '18 at 17:03

answered Feb 21 '18 at 15:24

Sensoray

2,360
2
18
27

No, unfortunately, that still does not work. The images still look stretched out – Rainier laan Feb 21 '18 at 15:35
@Feudelcosine148 They stay in proportion though. So what are you looking for then? For the image to stay in proportion and show the full height? The cards won't be the same size then. Do you not care if the cards are different sizes? – Sensoray Feb 21 '18 at 15:38
That's the problem. All the cards need to be the same height but I don't want the images to look stretched out. I tried a lot of things but none of them works. – Rainier laan Feb 21 '18 at 15:41
1

The stretched image is on top of the background image. Add the class `sr-only` to the `img`. This will hide it from view but still leave it (and its alt text) accessible to screen readers. @PaigeMeinke can you update your answer? – Sean Feb 21 '18 at 16:03
1

@sean thanks, I didn't realize I even left the image in there, but great idea, that's perfect. I never thought of doing that before for screen readers, I'll definitely do that for now on :] – Sensoray Feb 21 '18 at 17:04
1

@PaigeMeinke I've outlined the technique in a Q/A for future reference: https://stackoverflow.com/questions/48913759/how-to-add-alt-text-to-background-images-making-background-images-accessible – Sean Feb 21 '18 at 21:56

Harmdek · Answer 2 · 2018-02-27T14:38:51.297

0

add this to your 'img' styling:

img { height: 200px;width:100%;object-fit: cover; }

edited Feb 27 '18 at 14:38

answered Feb 21 '18 at 15:51

Harmdek

1
3

HTML CSS Fit image in fixed size

2 Answers2