Блог

Главная - Вопросы по программированию - Обрезка изображения по центру

Обрезка изображения по центру

#html #css #image

#HTML #css #изображение

Вопрос:

Мне нужно обрезать пейзажное изображение по центру внутри вертикальной рамки (например, 600 X 400). У меня есть следующий HTML-код с css-кодом для обрезки по центру. Но выходное изображение не обрезано по центру, и оно также растянуто.

 <div id="posts">
    <div class="image">
        <a href="#"> 
           <img src="Vasco45_barbosa.jpg">
        </a>
    </div>
</div>

 #posts .image {
    overflow: hidden;
    height: 600px;
    width: 400px;
    margin: 0 auto;
}

#posts .image img{
    background-position: center center;
    background-size: cover;
    display: block; 
    min-width: 100%;  
    min-height: 100%;  
    -ms-interpolation-mode: bicubic; 
}

Исходное изображение

Изображение после применения приведенного выше CSS-кода

Комментарии:

1. Я не вижу второе растянутое изображение, на которое вы ссылались. Вместо этого я вижу нерастянутую часть левой части исходного изображения.

Ответ №1:

Измените img css на этот

 #posts .image img{
    object-fit: cover;
    object-position: 50% 50%; 
    width: 100%;
    height: 100%;
}

Как это работает:https://jsfiddle.net/6ns549hy /

Комментарии:

1. Работает, как ожидалось

2. Это решение поддерживает все браузеры?? @павел Михальски

3. Большинство — IE / Edge не поддерживается (пока считается, что поддерживается), но есть некоторые исправления и обходные пути, такие как github.com/anselmh/object-fit