Unwanted image overflow when using slick carousel

Question

First time caller, long time listener.

I'm trying to fit my pictures into this slick carousel but the vertical portion is always going outside of the boundary. Ideally, I want my pictures to fill the carousel section (cover) and want the size to adapt responsively to screen size changes.

I'm new to coding and have tried a lot. Here are some links to the site where I am right now:

https://codepen.io/jerimijones/pen/WXvBMX

#carousel {
  width: 70%;
  height: 90%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  border-color: white;
  border-style: solid;}

https://carouseltest.netlify.com/

Any help would be greatly appreciated.

Could you possibly post the code you're trying? Ideally in a CodePen or jsfiddle or just in a ``` code block — phocks, Oct 31 '17 at 05:20

score 0 · Answer 1 · answered Oct 31 '17 at 05:27

0

A possible duplicate of CSS Image size, how to fill, not stretch?

You can use the css property object-fit.

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

See example here

There's a polyfill for IE: https://github.com/anselmh/object-fit

answered Oct 31 '17 at 05:27

phocks

2,933
5
27
28

Hey @phocks just added my site to codepen. Here's the link: https://codepen.io/jerimijones/pen/WXvBMX – jugumanweb Nov 01 '17 at 05:49

Unwanted image overflow when using slick carousel

1 Answers1