How can I make a slider responsive?

I created a slider. The images inside it are quite big (bigger than the cell in which I was trying to insert the slider), so it just messes everything up.

I was expecting that the slider (along its images) would fit into the cell.

Any advise?

PS. I am learning, I believe making it “responsive” would solve this, but maybe this is not right

Responsive is the correct term for what you want to do. It would definitely help if you gave us some example code or link to project… :wink:

If you are using bootstrap, there is a class .img-responsive that makes images shrink to fit their parent container. If you are not using bootstrap, have you tried using percentage based widths instead of pixels?

1 Like

To make the image exactly the size of the parent div

img {
  width: 100%;
  height: 100%;
}
1 Like