Default image divi menjadi hover dan ukuran sesuai kemauan kita
https://www.peeayecreative.com/how-to-change-crop-divi-image-aspect-ratios-in-the-builder/
=============
/*image aspect ratio landscape 16:9*/
.pa-image-16-5 .et_pb_image_wrap {
padding-top: 25.25%;
display: block;
}
.pa-image-16-5 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio square 1:1*/
.pa-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
display: block;
}
.pa-image-1-1 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 16:9*/
.pa-image-16-9 .et_pb_image_wrap {
padding-top: 56.25%;
display: block;
}
.pa-image-16-9 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 4:3*/
.pa-image-4-3 .et_pb_image_wrap {
padding-top: 75%;
display: block;
}
.pa-image-4-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 3:2*/
.pa-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
display: block;
}
.pa-image-3-2 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 9:16*/
.pa-image-9-16 .et_pb_image_wrap {
padding-top: 177.77%;
display: block;
}
.pa-image-9-16 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 3:4*/
.pa-image-3-4 .et_pb_image_wrap {
padding-top: 133.33%;
display: block;
}
.pa-image-3-4 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 2:3*/
.pa-image-2-3 .et_pb_image_wrap {
padding-top: 150%;
display: block;
}
.pa-image-2-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
==========
Komentar