Проблема CSS: невозможно добавить поле к строке изображений (React JS) - PullRequest
Новая
       42

Проблема CSS: невозможно добавить поле к строке изображений (React JS)

0 голосов
/ 11 июля 2020

Я не могу добавить поля к строке изображений. Поле есть без css на широком экране, но когда я масштабирую его до мобильного представления, поле становится 0. Итак, я добавил поле 10 пикселей из css, и это не имеет никакого значения. .

Я не очень хорош в css, пожалуйста, помогите.

CSS: 

.row__posters {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
}
.row__poster  {
    transition: transform 300ms;
    /* preserves the aspect ratio */
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    margin-right: 10px;
}
.row__poster:hover  {
    transform: scale(1.1);
    z-index: 1;
}

React JSX: 

import '../styles/Row.css';

const Row = ({ title, movies }) => {
    const posterUrl = "https://image.tmdb.org/t/p/w500/";
    const renderedRow = movies.map(movie => {
        return (
            <img
                className="row__poster"
                src={`${posterUrl}${movie.poster_path}`}
                alt={movie.title}
                key={movie.id} />
        );
    });
    return (
        <div className="row">
            <h1>{title}</h1>
            <div className="row__posters">
                {renderedRow}
            </div>
        </div>
    );
};

export default Row;

Вот как это выглядит на узкой ширине:

введите описание изображения здесь

ПРИМЕЧАНИЕ: Использование Next JS в React.

1 Ответ

0 голосов
/ 11 июля 2020

Вы пробовали использовать padding вместо margin? Я думаю, что приведенный ниже вариант может работать с вами:

Используйте padding на .img_wrapper

    .row__posters {
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .row__poster  {
        transition: transform 300ms;
        /* preserves the aspect ratio */
        object-fit: contain;
        width: 100%;
        max-height: 100px;
        // margin-right: 10px; comment this
        display: inline-block;
        padding-right: 10px;
    }
    .row__poster:hover  {
        transform: scale(1.1);
        z-index: 1;
    }

Вы можете посмотреть здесь для живой демонстрации. Надеюсь, это сработает для вас

...