Question: am making a card where i have the image and description below but the image is too zoomed and doesnt look attractive i've tried to adjust the height and image but it doesnt work

[![enter image description here](https://i.stack.imgur.com/ZXyPR.png)](https://i.stack.imgur.com/ZXyPR.png)

HTML

```
  <div id="event-card">
        <div id="card-image">
        <img src="{{ URL::to('/assets/photos/event3.jpg') }}">
        </div>
        <div class="container" id="card-details">
          {{$event->eventName}}
        </div>
        </div>

```

This is the CSS

```
#event-card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  display: inline-block;
  width:250px;
  height:250px;
  overflow: hidden;
  margin-right:10px;
  margin-bottom:10px;
  border-radius: 8px;
  margin-top:40px;
  }

 #card-image {
     background-image:url('/churchill/public/assets/photos/event3.jpg');
  height:60%;
  width: 100%;
  background-size:cover;
  overflow:hidden;
  background-repeat: no-repeat;
    }

#event-cards{
  width:80%;
  margin-left:156px;
  }

```

Answer: 
All well.. images.. biggest problem ever :D

Well you actually have few options.

I will be straightforward

```css
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

```

This will make image look natural and not stretched but it might cut it on sides for that

```css
img {
  max-width: 100%;
  height: auto;
}

```

This might be best solution for you. Image won't go over parent in width and it will go in height big enough to keep its aspect ratio and it will look natural. Play with it and see what looks best for you

PS: You also have

```css
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: scale-down;
object-fit: none;

```
What is the original width and height of the image?
if the image height `500px` and the width `500px` and you set it width `500px` and height `200px` it will cause a problem like you facing, to avoid this issue you can set the image as a background you can create another div with the height and width you want and set this image as a background and you can control it using `background-size:cover` and `background-position`