我正在开发项目(社交媒体网络应用程序),其中用户有权上传各种媒体。我将通过示例来解释问题,假设我有 500px300px 的 div 并且我正在获取各种尺寸的图像,它可以是纵向或横向,也可以是像 50px50px 这样的小图像。我想在固定大小的 div 中适合这样的图像,而不会丢失其纵横比,也不会被裁剪或被拉伸。我尝试使用 css 属性,但它们似乎都不适用于所有类型的图像,我正在努力寻找解决方案。
渲染图像的组件:
import React, { useRef } from "react";
export default function Example(props) {
const myRef = useRef(null);
const [dimensionofImg, setDimensionofImg] = React.useState(null);
const [dimensionsofDiv, setDimensionsofDiv] = React.useState(null);
const [imagedimensions, setImagedimensions] = React.useState(null);
React.useEffect(() => {
setDimensionsofDiv({
width: myRef.current.offsetWidth,
height: myRef.current.offsetHeight
});
}, []);
React.useEffect(() => {
let dimensionTocompare;
if (
dimensionofImg &&
dimensionofImg.width < dimensionofImg &&
dimensionofImg.height
) {
dimensionTocompare = dimensionsofDiv.width;
let changedWidth =
(dimensionTocompare * dimensionofImg.width) / dimensionofImg.height;
setImagedimensions({
maxWidth: "",
maxHeight: "100%",
width: changedWidth,
height: ""
});
} else if (
dimensionofImg &&
dimensionofImg.width > dimensionofImg &&
dimensionofImg.height
) {
dimensionTocompare = dimensionsofDiv.height;
let changedHeight =
(dimensionTocompare * dimensionofImg.height) / dimensionofImg.width;
setImagedimensions({
maxWidth: "100%",
maxHeight: "",
width: "",
height: changedHeight
});
}
else if (
dimensionofImg && dimensionofImg.width == dimensionofImg && dimensionofImg.height
) {
setImagedimensions({
maxWidth: "100%",
maxHeight: "100%",
width: "",
height: ""
});
}
}, [dimensionofImg, dimensionsofDiv]);
function renderContent() {
return (
<div>
width of div: {dimensionsofDiv.width}
<br />
height of div: {dimensionsofDiv.height}
</div>
);
}
return (
<div>
{dimensionsofDiv && renderContent()}
dimensions of image width{dimensionofImg && dimensionofImg.width}, height
{dimensionofImg && dimensionofImg.height}
<div
style={{ height: 500, width: 300, border: "solid 1px red" }}
ref={myRef}
>
<img
style={{
maxWidth: `${imagedimensions && imagedimensions.maxWidth}`,
maxHeight: `${imagedimensions && imagedimensions.maxHeight}`,
width: `${imagedimensions && imagedimensions.width}`,
height: `${imagedimensions && imagedimensions.height}`
}}
onLoad={(e) => {
setDimensionofImg({
width: e.currentTarget.offsetWidth,
height: e.currentTarget.offsetHeight
});
}}
alt=""
src={props.src}
/>
</div>
</div>
);
}
import "./styles.css";
import Example from "./component"
const src = "https://picsum.photos/100/800/?random";
export default function App() {
return (
<div className="App">
<Example src={src}/>
</div>
);
}
答案 0 :(得分:0)
将宽度限制为您的 D://React/react1
宽度并将 D://React
保留为自动以保持 div
。
height
答案 1 :(得分:0)
最接近您需要的是 object-fit: contain
属性。
这将根据它是横向(将占据所有宽度)还是纵向(将占据所有高度)填充 div,并且所有这些都保持纵横比。您只需要为 div
提供维度。
div {
width: 500px;
height: 500px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}