Блог

Итак, в настоящее время у меня есть веб-сайт такого типа

и при прокрутке вниз большое изображение создает обертку всей строки, и мой элемент перемещается с того места, где он должен быть.

код:

Элементы портфолио.jsx

 function PortoflioSection({ item, type, setActive, fetchedItems }) {
  const [isOnMainPage, setOnMainPage] = useState(true);
  const [items, setItems] = useState([]);
  useEffect(() => {
    let arr = [];
    item[type].forEach((e, idx) => {
      arr.push(
        <PortfolioItem
          key={idx}
          name={e.name}
          url={e.thumbnail}
          description={e.description}
          headcolor={e["text-color"]}
          uploadedby={e["uploaded-by-name"]}
          uploadedbypic={e["uploaded-by"]}
          state={setItems}
          type={"category"}
          ida={e.id}
          category={e.id}
          setActive={setActive}
          itemsA={fetchedItems}
          setOnMainPage={setOnMainPage}
        />
      );
    });
    setItems(arr);
    setInterval(() => setActive(false), 2000);
  }, []);

  return (
    <div className="h-full bg-gray-200">
      <div className="px-5 py-3 object-cover bg-cover w-full h-full resize">
        <div className="flex w-full p-1">
          <div className="w-full mb-2 lg:mb-0 flex">
            <div className="w-full">
              <Link to="/">
                <h1
                  className="sm:text-4xl text-5xl font-medium font-bold title-font mb-1 text-gray-900"
                  onClick={() => window.location.reload(false)}
                >
                  {item.name}
                </h1>
              </Link>
              <div className="h-1 w-20 bg-indigo-500 rounded"></div>
            </div>
            {!isOnMainPage ? (
              <div className="object-left justify-left items-left">
                <PreviousStateButton
                  currentType={items[0]["props"]}
                  setItems={setItems}
                  items={fetchedItems}
                  setActive={setActive}
                  setOnMainPage={setOnMainPage}
                />
              </div>
            ) : (
              ""
            )}
          </div>
        </div>
      </div>
      <main className="py-4">
        <div className="px-4">
          {isOnMainPage ? <AboutMe items={fetchedItems["about_me"]} /> : ""}
          <div className={`min-h-screen items-center m-auto bg-color-200 mx-auto flex container justify-center `/**flex-col-1 md:flex-col-3 lg:flex-col-4**/   `flex-items-stretch flex-wrap flex-grow`   /**-mx-1 md:-mx-2 lg:-mx-2 xl:-mx-3*/   `overflow-hidden`}>
            {items.map((e) => e)}
          </div>
        </div>
      </main>
    </div>
  );
}
 

Элементы портфолио.jsx

 function PortfolioItem({
  name,
  url,
  description,
  headcolor = "text-gray-700",
  uploadedby,
  uploadedbypic,
  state,
  type,
  ida,
  setActive,
  scale="hover:scale-105",
  category,
  subcategory,
  isItem,
  itemsA,
  setOnMainPage
}) {

  let onClickEvent = (e) => {
    setOnMainPage(false)
    e.preventDefault();
    if(type === "items") return;
    let ies = itemsA["category"];
    if(type === "category") {
      let ite = itemsA["category"].filter((e) => e.id === ida)[0];
      setActive(true);
      let arr = [];
      ite['sub-category'].forEach((e, idx) => {
        arr.push(
          <PortfolioItem key={idx}
          name={e.name}
          url={e.thumbnail}
          description={e.description}
          headcolor={e.headcolor}
          uploadedby={e["uploaded-by-name"]}
          uploadedbypic={e["uploaded-by"]}
          state={state}
          type={"sub-category"}
          ida={ida}
          category={category}
          subcategory={e.id}
          itemsA={itemsA}
          setActive={setActive}
                setOnMainPage={setOnMainPage}
        />
        );
      state(arr);
      });
      setInterval(() => setActive(false), 4000);
    } else if(type === "sub-category") {
        setActive(true);
        let itea = (ies.filter((e) => e.id === category)[0])["sub-category"].filter((e) => e.id === subcategory)[0];
        let arr = [];
        itea['items'].forEach((e, idx) => {
            arr.push(
              <PortfolioItem key={idx}
              name={e.name}
              url={e.thumbnail}
              description={e.description}
              headcolor={e.headcolor}
              uploadedby={e["uploaded-by-name"]}
              uploadedbypic={e["uploaded-by"]}
              state={state}
              type={"items"}
              ida={ida}
              category={category}
              subcategory={subcategory}
              setActive={setActive}
              scale="hover:scale-105"
                    setOnMainPage={setOnMainPage}
            />
          );
        });
        state(arr);
        setInterval(() => setActive(false), 4000);
    }
  }

  return (
    <>
    <div className={`my-3 object-cover object-top mx-3 h-full w-full md:my-2 md:w-1/2 lg:my-2 lg:w-1/3 xl:my-2 xl:w-1/4 shadow-lg hover:shadow2xl ${scale} transform duration-500`}>
        <div className="bg-white rounded-lg overflow-hidden shadow relative" onClick={onClickEvent}>
          <img className="h-auto w-full object-cover object-center" src={url} alt="" />
          <div className="p-4 h-auto">
            <h3 className="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg text-center" onClick={onClickEvent}>
                {name}
            </h3>
            <div className="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm text-center">
              {description}
            </div>
            </div>
          {/**
          <div className="author flex items-center -ml-3 my-3">
            <div className="user-logo">
              <img className="w-12 h-12 object-cover rounded-full mx-4 shadow" src={uploadedbypic} alt="avatar" />
            </div>
            <h2 className="text-sm tracking-tighter text-gray-900">
              <a>By {uploadedby}</a>
            </h2>
          </div>
          **/}
        </div>
    </div>
  </>
  );
}
 

I tried to replace flex with container or change the object size amp; positions but it didn’t seem to work.