Grow your CSS skills. Land your dream job.

Why are my pictures stretching?

  • # February 28, 2013 at 6:43 pm

    Don’t know what is going on but it appears that AnythingSlider is stretching pictures that are used as slides. First place I looked was at the image dimensions but I have those same pictures in a gallery in another section of the site.

    Here is the [link](http://felicianoelle.com “”)

    Any suggestions?

    # March 1, 2013 at 9:21 am

    Hi matt_sanford!

    When I look at the `#slider` element, I see it is being effected by two files:

    1. `anythingslider.css` sets the slider dimensions to 1080×720.
    2. `theme-metallic.css` set the slider dimensions to 960×540 (overriding the anythingslider.css)

    You don’t need both files to add a theme to AnythingSlider.

    Also, because the default options are all being used, the `resizeContents` option is set as `true` and forces all images to resize to fit the slider dimensions. If you want to have images of different sizes, make sure to set each image width and height and change the `resizeContents` option to `false`.

    # March 1, 2013 at 10:07 am

    Some of your pictures are bigger then
    div class=”AnythingSlider …. style=”width: 960px; height: 540px;”

    As I can see picture inside it have
    img src=”/images/fe-images/newborn/2.jpg” style=”width: 100%; height: 100%;”

    Original size of image is
    1072 × 712

    If You change width of this picture from 1072 to 960, height well be 638. Not 540.

    **Resolution**
    You need do some with pictures. Prepare all pictures in one size which well be 960px; height: 540px;
    or remove height: 100%; in img Tags

    # March 2, 2013 at 11:21 am

    @Sergrezn: Another solution would be to set the slider to accommodate the largest image, then wrap all of the images in a div:

  • What happens is that the div sets the styling of 100% height and width instead of the image.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".