需要有关超赞表格图像自动调整大小的帮助

Question

我需要帮助以使图像自动调整大小以适合表格。同样，当您单击图像时，图像会拉伸。我也该如何解决？ https://awesome-table.com/-LPbHuYayeX6ypVK7I0u/view

/*** CSS related to the content displayed***/

.card:not(.card-padding) {
        cursor:pointer;
}
.container {
        text-align:left;
}

.Source ID {
        font-size: 14px;
        line-height: 18px;
        color: #333;
        margin:15px 0 5px 0 !important;
        text-align:justify;
        max-width:500px;
        display:none;
}

.name {
        font-size: 15px;
        margin: 0 0 !important;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
        color: rgb(50, 122, 247);
        padding-right: 0;
        padding-top: 1px;
        font-style: normal;
        display:inline-block
}

.img-preview{
    display: flex;
    justify-items: center;
}
.img-preview:after {
    content: "";
    display: block;
  
    margin-top: 15px;
    width: 0;
}
.img-preview>img{
       height: 200px;
}

.popUp{
        transition: padding 500ms  cubic-bezier(0, 0, 0, 1), background-color 500ms  cubic-bezier(0, 0, 0, 1);
        padding: 10%!important;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
}

.popUp > div{
        transition: box-shadow 500ms cubic-bezier(0, 0, 0, 1);
        box-shadow: rgba(0, 0, 0, 0.4) 0 12px 32px 8px;
        background-color: white;
        cursor:default!important;
}

.cards-container{
        position:relative;
}

.button-container {
        text-align:center;
        float:right;
        display: none;
}
.popUpOpen .button-container {
        display: inline-block;
}

.openButton {
        display:none;

        width: 50px;
        height: 20px;

        padding:0.5em 0.35em 0.8em 0.35em;
        margin-top:6px;
        margin-left:10px;

        border-radius:2px;

        text-decoration:none;
        text-align:center;
        font-size:15px;
        background-color:#00C853;
}

.availability {
        display:none;

        max-width:500px;

        font-size: 14px;
        font-weight:bold;
        line-height: 18px;
        text-align:justify;
        color: #666;
}

[data-availability="Yes"][data-available="yes"] {
        display:inline-block;
}

[data-availability="No"][data-available="no"] {
        display:inline-block;
}


.popUpOpen .cross-relative {
        position:relative;
}

.closePopup{
        z-index: 1;
        right: 5px;
        padding: 7px;
        color: rgb(68, 68, 68);
        position: absolute;
        cursor:pointer;
        display:none;
}

.popUpOpen .closePopup {
        display:block;
}

.popUpOpen .description {
        display:block;
}

.content-container{
        position:relative;
}

.Big-Img {padding-right:7px;margin-bottom:15px;margin-left: auto;margin-right: auto; height: 200px; }
}

.closePopup img {
        width:20px;
}

.details {
        color: #666;
        line-height: 16px;
        font-size: 15px;
        text-decoration: none;
        letter-spacing: -0.5px;
        font-style: normal;
}

.Description {
        text-decoration: none;
        font-size: 18px;
        line-height: 20px;
        color: #444;
        font-weight: bold;
        clear: left;
        font-style: normal;
        display:block;
        margin:7px 0 !important;
}

.info {
        margin:0 7px;
}