Как получить тег img, чтобы он соответствовал масштабу внутри ячейки сетки css без подгонки объекта?


Как получить тег img, чтобы он соответствовал масштабу внутри ячейки сетки css без подгонки объекта?

01.10.2020 09:48:44 Просмотров 3 Источник

Это компонент vue,его родитель визуализирует 8 из этих компонентов в четном макете 2 x 4. Изображение больше, чем его сеточный контейнер. Я бы хотел, чтобы он уменьшился, чтобы соответствовать контейнеру, сохраняя при этом его соотношение сторон. Однако object-fit не оказывает никакого влияния на тег img, и изображение визуализируется в полном размере, резко искажая сетку и портя мой макет.

Когда тег img закомментирован, его Родительский div форматируется до нужного размера и заполняет контейнер сетки.

<template>
    <div class="camera-wrapper">
        <img class="camera" src="../assets/tsLogo.png" />
    </div>
</template>


<style scoped>
.camera-wrapper {
position: relative;
border: 1px solid black;
width: 100%;
height: 100%;
overflow: hidden;
}

.camera {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
У вопроса есть решение - Посмотреть?

Ответы - Как получить тег img, чтобы он соответствовал масштабу внутри ячейки сетки css без подгонки объекта? / How to get img tag to fit to scale inside a css grid cell without object-fit?

A Haworth

02.10.2020 12:18:03

Будет ли возможна замена на background-image на div и использование background-size: contain вместо элемента img?

Мне очень жаль, что я не могу разместить фрагмент, так как в данный момент я ограничен сенсорным устройством

Помочь в развитии проекта:
Закрыть X