Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Why are my pictures stretching?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43046
    matt_sanford
    Participant

    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?

    #126561
    Mottie
    Member

    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`.

    #126566
    sergrezn
    Member

    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

    #126682
    Mottie
    Member

    @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)
  • The forum ‘JavaScript’ is closed to new topics and replies.