Мобильная версияЯ хочу создать раздел карточек для своего веб-сайта-портфолио. Я добавил изображения с этими карточками. Теперь я хочу стилизовать изображения в React JS. В частности, я хочу по-другому использовать стиль масштабирования преобразования для этих изображений. Я использовал эти изображения в качестве реквизита.
Дело в том, что эти изображения различаются по размеру. Я знаю, что если я обрежу большие изображения в меньший размер, они поместятся в карты согласно моему коду. Но я хочу стилизовать изображения и разместить изображения большего размера в маленьком размере, избегая техники обрезки.
Вот когда я использую одно и то же изображение для всех карточек – Для одного и того же изображения
Вот когда я использую разные изображения – для нескольких изображений См. первую карточку. Размер изображения большой, поэтому все нижние элементы div отображаются за пределами карточки.
Вот полный JSX-код родительского компонента[cards.jsx] для того же изображения —
импортировать React из 'реагировать' импортировать './Cards.css'; импортировать Mycard из './Cardshown'; импортировать проект из «../../Images/project.png»; импортировать робота из «../../Images/robot.png»; const Карты = () => { const leftbtn = () => { let box = document.querySelector('.cards-container'); box.scrollLeft = box.scrollLeft + 600; } const rightbtn = () => { let box = document.querySelector('.cards-container'); box.scrollLeft = box.scrollLeft - 600; } возвращаться ( ) } экспортировать карты по умолчанию Изменения строки, внесенной в код для нескольких изображений-
Вот почему я хочу по-другому оформить эти изображения, чтобы можно было контролировать размер. Я не знал, как это сделать, когда использовал его в качестве реквизита.
Для справки –
JSX-код дочернего компонента [cardsshown.jsx] –
импортировать React из 'реагировать' импортировать './Cardshown.css'; const Cardshown = (реквизит) => { возвращаться (
{props.name {props.projname {props.detail ) } экспортировать карту по умолчанию CSS-файл родительского компонента [cards.css] –
.Cardsection{ положение: относительное; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; высота: 60вх; маржа-верх: 38рем; переполнение: скрыто; } .cards-контейнер{ дисплей: гибкий; выровнять-элементы: по центру; переполнение-х: скрыто; переполнение-y: скрыто; поведение прокрутки: плавное; поле слева: 60 пикселей; поле справа: 60 пикселей; } .левая кнопка, .правая кнопка{ ширина: 60 пикселей; позиция: абсолютная; граница: нет; цвет фона: rgba(255, 255, 255, 0); } .left-btn{ правильно: 0; } .right-btn{ слева: 0; } .left-btn>h1, .right-btn>h1{ размер шрифта: 50 пикселей; начертание шрифта: жирный; цвет фона: rgba(0, 0, 0, 0,436); радиус границы: 50 пикселей; белый цвет; ширина: 50 пикселей; высота: 100 пикселей; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; курсор: указатель; } CSS-файл дочернего компонента [cardsshown.css]-
.cards-shown{ положение: относительное; минимальная ширина: 250 пикселей; максимальная ширина: 300 пикселей; высота: 300 пикселей; поле справа: 70 пикселей; цвет границы: RGB (255, 123, 0); ширина границы: 5 пикселей; стиль границы: сплошной; радиус границы: 10 пикселей; разрыв: 20 пикселей; } .cards-show>:nth-child(1){ преобразование: масштаб (1); ширина: 70%; } .cards-show>:nth-child(2){ дисплей: гибкий; позиция: абсолютная; поле сверху: 1 пиксель; слева: 88 пикселей; черный цвет; семейство шрифтов: «Lucida Sans»; размер шрифта: 20 пикселей; начертание шрифта: жирный; } .cards-show>:nth-child(3){ дисплей: гибкий; маржа сверху: 45 пикселей; оправдание-содержание: центр; размер шрифта: 22 пикселей; начертание шрифта: жирный; цвет: RGB(157, 63, 219); } .span-hover:hover{ цвет: RGB(100, 5, 163); курсор: указатель; } .cards-show>:nth-child(4){ дисплей: гибкий; оправдание-содержание: центр; маржа сверху: 40 пикселей; }
