0

I want the green box to keep the same proportions but fit to the black row on the screen.

the ratio will be 535:315 height:width

so if the height grows to 615 the width will be 362.10, because 615:362.10 is the same ratio as 535:315

Component

import React from "react"; import "./App.css"; import HorizontalScroll from 'react-scroll-horizontal'

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);
}
Hasham Minhas
  • 436
  • 3
  • 13

1 Answers1

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

Read this article to understand this concept better: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Sangam BK
  • 28
  • 6