-2

i have a problem with the images of my slider in the header. Please take a look at the page.

When the screen resolution is too high, the images are getting cut off. Please focus on the first two images. You can test different screen resolutions here. The images look good until 20" Desktop (1600 x 900). When you test 23" Desktop (1920 x 1080), you won't be able to see the bottom of the first and the second car.

Any idea how I could fix it?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Reza Saadati
  • 5,018
  • 4
  • 27
  • 64
  • Well it looks like the width of the image is increasing but the container's height is fixed so as the image gets bigger the container is not big enough to contain it – Huangism Apr 20 '15 at 15:14
  • 1
    Remove `height:480px` and `max-height:480px` from `.carousel .slider` element. Or control the height with media queries above 1600px manually – robjez Apr 20 '15 at 15:20
  • 1
    URL shorteners or redirectors are not allowed on SO. You must also post the relevant code in the OP along with any demo or direct URL. Otherwise, your posting becomes totally useless after you fix the problem. – Sparky Apr 20 '15 at 15:55

1 Answers1

1

If you don't mind SEO for the images, there is another way to display them. Set them as a background-image on .item elements. And remove img tags. Then in css set something like this:

.item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 100px;
}

You need to provide a height to elements, so change it to whatever.

ndcweb
  • 725
  • 4
  • 10