Adapt inner Uploaded Media to the Outside Container

[puddlejumper26]

Description

In the project, sometimes component need to have media uploading, then in this situation, we would have at least two parts in the codes

1. Upload media
2. Container to display the media

Therefore, we would have the following situations need to be solved.

1. media could be length > width, width > length, width === length
2. container could be length > width, width > length, width === length

Thus in total could be 9 combinations. And we need to fulfill all of them at the same time.

Solution

.uploaded-media{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;                          <=== to force the media complete inside the container
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

<outside-container>
        <div *ngIf="uploadedMediaUrl" class="uploaded-media" [ngStyle]="{backgroundImage: 'url(' +uploadedMediaUrl + ')' }"></div> 
</outside-container>