Блог

Предположим, что размер моего изображения 960×960, но высота img элемента 720 пикселей.

 <img class="imgs" src="~/test.jpg" />
 

стили для .imgs

 .imgs {
    width: 100%;
    height: 45rem;
    object-fit: cover;
}
 

И теперь я могу использовать object-position для установки позиции top/bot или другого, но могу ли я переместить этот img, используя некоторые единицы измерения?
Я попытаюсь объяснить это с помощью краски (извините за мои навыки рисования).:

Легенда: черная линия — div, красная линия — img

Когда я буду использовать object-posotion: top его, это выглядит так:

obj-pos-бот

При использовании object-position: bottom :

obj-pos-топ

А теперь как я хочу его передвинуть:

Результат

Поэтому я хочу object-position: top , но также немного увеличить содержимое изображения (на несколько пикселей). Я пробовал использовать поля и отступы, но это перемещает весь элемент, а не только содержимое

Если я правильно понял ваш вопрос, вы хотите выровнять содержимое изображения в поле элемента. Вы действительно можете достичь этого с object-position помощью .

Просто используйте единицу измерения, которую вы хотите использовать, вместо значений top, bottom, etc. ; для exmaple:

 object-position: 50% 10px;
 

Первое значение задает горизонтальное положение, второе значение задает вертикальное положение.