优化Hero组件背景图片实现方式确保手机端不会横向溢出
This commit is contained in:
parent
5e748005a1
commit
acf88d1758
@ -43,21 +43,18 @@ export default function Hero() {
|
||||
return (
|
||||
<div className="container pt-36 xl:py-[12.5rem] lg:py-[12.5rem] md:py-[12.5rem] !text-center !relative">
|
||||
<div
|
||||
className="absolute"
|
||||
className="absolute left-0 top-0 w-full h-full"
|
||||
style={{
|
||||
top: "-15%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
zIndex: 0,
|
||||
minHeight: "300px",
|
||||
maxWidth: "100vw",
|
||||
overflow: "hidden",
|
||||
backgroundImage: `url(${bgImage})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
className="!rounded-[0.8rem]"
|
||||
alt="image"
|
||||
src={bgImage}
|
||||
width={1400}
|
||||
height={1080}
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
<div className="flex flex-wrap mx-[-15px] !relative">
|
||||
<div className="lg:w-8/12 xl:w-8/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user