By default, the Divi Slider module uses the images as Background because of which the images get cropped in different screen sizes and responsive views.
If you are looking to use the background image and fix the responsive then this article will be helpful in this case: My slider module isn't responsive
This solution doesn't use images as background but the actual <img> tags and your images will not appear cropped.
IMPORTANT: You need to make sure that all your slider images are re-sized with the same dimensions. If you are using fullwidth, it's better to have the slider image's width of minimum 1400px, and height can be used which suits your image. But all your slide images should be of the same sizes.
Let's get started:
1, Create a slider module and add a new slide.
2, Go to the Image & Video section and add your slide image there:
Important: We are not using the images in the Background.
3, Fill up the contents for Title, Description, Button, Links as required.
4, Add more slides with the same settings and same image size.
5, Go to Slider Module Settings > Advance > CSS CLass
Use this as CSS Class: "my_uncrop_slider"
Like this:
6, Finally add this CSS in Theme Options > Custom CSS:
/* Uncropped images of Slider module */
.my_uncrop_slider.et_pb_slider .et_pb_slide_image {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
top: auto;
position: relative !important;
display: block !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_container {
max-width: 100% !important;
width: 100% !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide_image img {
max-height: none !important;
width: 100% !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide {
padding: 0 !important;
}
.my_uncrop_slider.et_pb_slider .et_pb_slide_with_image .et_pb_slide_description {
position: absolute !important;
width: 100% !important;
padding: 5% !important;
float: none !important;
bottom: 0 !important;
text-align: left;
}
.my_uncrop_slider.et_pb_slider .et-pb-active-slide .et_pb_slide_image {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
Here's the result with no cropping of the slider images on any screen sizes:
