Images exceeding size - html

Question

I want to display images in my div. I display different images according to the condition (if moviePoster true).
I moviePoster I display it, but if it is false, I display a image that informed that the file is not found.
I don't know why but when I display these 2 types of image, the moviePoster image, exceeding the size of the dive.
This is a screen from the issue in my application
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
}
.list-img {
// border: 5px solid red;
width: 20%;
}
img {
height: 100%;
width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="list">
<div class="list-img">
<div *ngIf="moviePoster; else notFound">
<img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
</div>
<ng-template #notFound>
<img src="../../assets/not_found.jpg" alt="...">
</ng-template>
</div>

Answer 1

img is a default display: inline, so height and width refers to inner content.
Anyway set image width and height usually stretches image, and that's orrible.
I suggest on using a div with the image setted as background, so use something like that:
html:
...
<div
*ngif="..."
class="thumbnail"
style="background-image: url(https://...{{ moviePoster }})"
></div>
...
css:
.thumbnail{
background-size: cover;
background-position: center;
}
You should apply this class also to #notFound.
One thing missing: thumbnail div must have height and width expressed
You can do that in multiple ways via css, depending on how have you structured the card box.
Hope it helps.

Answer 2

i think this is what you want :
if the image is null then the default background will show.
UPDATE: i have made it more dynamic
.list {
display: flex;
flex-direction: column;
}
.list-item {
height: 150px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 3px 2px rgba(0,0,0,.5);
}
.list-item + .list-item {
margin-top: 10px;
}
.list-img {
width: 200px;
height: 150px;
transition: background .5s ease;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://www.tourismselangor.my/wp-content/themes/Directory/images/noimage.jpg);
}
<div class="list">
<div class="list-item">
<div class="list-img" style="background-image: url(https://picsum.photos/200)"></div>
</div>
<div class="list-item">
<div class="list-img"></div>
</div>
<div class="list-item">
<div class="list-img" style="background-image: url(https://picsum.photos/200)"></div>
</div>
</div>