Масштабировать большую картинку в маленький контейнер

Рейтинг: 0Ответов: 1Опубликовано: 09.03.2023

Есть картинка 5000х3000 пикселей, нужно ее расположить по центру экрана в контейнере 600х400 пикселей. Как сделать чтобы она смасштабировалась?

<body>

        <div class="container">
            <img src="ягуар.jpeg">
        </div>
    
    </body>
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html, body {
        font-family: Arial;
        min-height: 100vh;
        width: 100%;
        border: 3px solid black;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    
    .container {
        border: 3px solid red;
        width: 600px;
        height: 400px;
    }
    
    .container .img {
        width: 100%;
        height: 100%;
    }
css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Используйте свойство object-fit: https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как или , должно заполнять контейнер относительно его высоты и ширины.

Например:

.container .img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}