与高度相比如何设置宽度比？ [复制]

Question

我希望绿色框保持相同的比例，但适合屏幕上的黑色行。

比例将为 535:315 高度:宽度

所以如果高度增加到 615，宽度将为 362.10，因为 615:362.10 与 535:315 的比例相同

组件

从“反应”导入反应； 导入“./App.css”； 从 'react-scroll-horizo​​ntal' 导入 Horizo​​ntalScroll

function Home() {
return(
<>
<div className="Container">
<div className="Row">
<HorizontalScroll style={{height: '100%', width: '100%'}}>
<div className="Card">
</div>
<div className="Card">
</div>
<div className="Card">
</div>
<div className="Card">
</div>
<div className="Card">
</div>
<div className="Card">
</div>
<div className="Card">
</div>
</HorizontalScroll>
</div>
</div>
</>
)
}

export default Home;

CSS

.Container {
background: rgb(255,255,255);
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
overflow-y: hidden;
}

.Row {
background: rgb(0,0,0);
top: 150px;
bottom: 50px;
left: 0px;
right: 0px;
position: absolute;
}

.Card {
object-fit: contain;
background: #7f87;
height: 535px;
width: 315px;
border-radius: 10px;
margin-left: 25px;
transform: transform 450ms;
}

.Card:hover{
transform: scale(.99);
}

Answer 1

.your-green-box {
    width: 100%; 
    padding-top: 169.84%; /* 535/315*100 */
}

阅读这篇文章以更好地理解这个概念：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp