我是 React JS 的初學者，所以我將 react-simple-image-slider 用于我的影像滑塊組件，但我希望影像也能在移動設備上回應，所以我嘗試使用設定寬度和高度vw,vh 或百分比，但它只接受數字。我認為會有一個先進的概念來處理這個問題，但我不知道它是什么。任何幫助將不勝感激！
<div className="card_imgBox">
<SimpleImageSlider
className="card_img"
width={400}
height={300}
images={item.thumb}
showBullets={true}
showNavs={true}
/>
uj5u.com熱心網友回復：
將值放入將解決您的問題的字串中。
Width="90%"
height="100%"
uj5u.com熱心網友回復：
您應該使用 % yes，因為現在滑塊將始終具有相同的寬度和高度。
uj5u.com熱心網友回復：
由于SimpleImageSlider組件的 API 不接受字串值，因此您可以使用調整大小觀察器： . 然后，您將設計外部樣式div以使其具有您想要的大小。
import React from "react";
import useResizeObserver from "use-resize-observer";
const App = () => {
const { ref, width = 1, height = 1 } = useResizeObserver();
return (
<div ref={ref} className="card_imgBox" style={{ width: "90vw", height: "30px" }} >
<SimpleImageSlider
className="card_img"
width={width}
height={height}
images={item.thumb}
showBullets={true}
showNavs={true}
/>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493560.html
上一篇：CSS更改影像容器中的背景顏色
下一篇：Python-部分掩蓋影像