Background-Position вообще не работает [CSS3]

Question

Пытался стилизовать image, чтобы соответствовать моему экрану, используя CSS3, но я думаю, background-repeat, background-position или background-size вообще не работает ..

Вот результат, который я заархивировал ....

Code in Html

<v-card @click="addPos(item)" v-if="item.image" class="posCard">
    <div class="posCard--pos-img">
        <img :src="'http://127.0.0.1:8000/image/' + item.image" />
    </div>
    <div class="posCard--title">
        <span>{{ item.name }}</span>
    </div>
</v-card>

And Here the code in style tag

<style lang="scss">
.posCard {
        border: #000;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
        // box-shadow: 0 1px 15px 1px rgba(60, 55, 68, 0.15);
        &--pos-img {
            height: 6rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: center;
        }

        &--title {
            text-align: center;
            background: #efefef;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }
</style>

Конечно, я подумал, возможно, я что-то не так делаю в своем коде ....

Любая помощь будет признательна. Заранее спасибо ...

Answer 1

Вы используете изображение в качестве переднего плана и применяете стили для фона.

Попробуйте это.

<v-card @click="addPos(item)" v-if="item.image" class="posCard">
   <div class="posCard--pos-img">
   </div>
</v-card>

.posCard {
    &--pos-img {
        height: 6rem;
        background-repeat: no-repeat;
        background-image: url("http://127.0.0.1:8000/image/item.image");
        background-position: center;
        background-size: center;

Answer 2

Поместите это имя класса "pos-img" в тег img, примените это свойство стиля и попробуйте

&--pos-img {
            height: 6rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: center;
        }