.image-display {
    width: 100%; /* Or a fixed width */
    height: 60vh; /* Example: Make the container 60% of the viewport height */
    /* You can also use fixed pixels, e.g., height: 400px; */
    display: flex; /* Use flexbox to easily center content */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Just for visualization */
    overflow: hidden; /* Hide any overflow if 'cover' is used and image is larger */
}

.image-display img {
    width: 100%;  /* Image will try to fill 100% width of its parent */
    height: 100%; /* Image will try to fill 100% height of its parent */
    object-fit: contain; /* OR cover, fill, scale-down, none */
}