1. Width & Height
The width and height properties define the size of an element. They can use units like px, %, em, rem, or vw/vh.
CSS Example
.box {
width: 200px;
height: 100px;
background: skyblue;
text-align: center;
line-height: 100px;
}2. Min & Max Width / Height
min-width / min-height set the minimum size an element can shrink to, while max-width / max-height restrict the maximum size.
CSS Example
.resize-box {
width: 50%;
min-width: 150px;
max-width: 400px;
height: 100px;
background: lightgreen;
text-align: center;
line-height: 100px;
}3. Aspect-ratio
The aspect-ratio property ensures elements maintain a consistent width-to-height ratio.
CSS Example
.ratio-box {
aspect-ratio: 16 / 9;
background: coral;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}4. Object-fit & Object-position
object-fit controls how media (like images or videos) are resized within their container. object-position defines the alignment inside the box.
CSS Example
.img-container {
width: 250px;
height: 150px;
border: 2px solid #333;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}