css实现在一定的区域内最大程度的完整展示图片

效果图

需求：在固定的宽高下，最大程度并且完整的展示图片

css

        .image-container {
            margin: auto;
            width: 1000px;
            height: 1200px;
            overflow: hidden;
            background-color: pink;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

html

    <div class="image-container">
        <img src="/a.jpeg" alt="Your Image">
    div>
1
2
3