To crop image based on ratio, on Elementor’s Image Widget add this CSS:
16:9 Landscape CSS
selector {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
selector img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 56.25%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: center;
}
9:16 Portrait CSS
selector {
position: relative;
width: 100%;
height: 0;
padding-bottom: 177.77%; /* (9 / 16) * 100% */
overflow: hidden;
}
selector img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 56.25%; /* (16 / 9) * 100% */
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: center;
}