Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2019
    Posts
    2
    Member #
    60588

    Images stretched in bootstrap myCarousel

    I am doing a site for a client and it's using myCarousel on the home page and on full view, the slideshow images are fine but on mobile view, the images are stretched vertically due to having height: 180px; The slideshow images have 3-5 lines of captions so put that fixed height in but the client is saying they are stretched so I put object-fit: cover in which kind of solved the issue of stretched but it cut off the images either side and the client is not happy with this, I have tried img-responsive which again solves the stretched issue but the captions then do not fit on. I am out of ideas of what to try, I don't think there is anything can be done, can anyone help please?

    slideshow-images-stretched-issue.jpg

  2.  

  3. #2
    Junior Member
    Join Date
    Apr 2019
    Posts
    2
    Member #
    60588
    UPDATE: Think I have solved it using the following CSS

    Code:
    .carousel-inner > .item > img {
        height: 180px;
        object-fit: cover;
        width: 100%;
        object-position: right center;
        }    
        .carousel-inner > .item:nth-of-type(7) > img {
        height: 180px;
        object-fit: cover;
        width: 100%;
        object-position: left center;
        }
        .carousel-inner > .item:nth-of-type(9) > img {
        height: 180px;
        object-fit: cover;
        width: 100%;
        object-position: left center;
        }
        .carousel-inner > .item:nth-of-type(10) > img {
        height: 180px;
        object-fit: cover;
        width: 100%;
        object-position: left center;
        }
        .carousel-inner > .item:nth-of-type(12) > img {
        height: 180px;
        object-fit: cover;
        width: 100%;
        object-position: left center;
        }
    It seems to have worked with that CSS

  4. #3
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Personally I use slick slider instead of the Bootstrap carousel as it is more expansive and easier to work with.

    Basically in both occasions all you need to do is set your .item div with a background-image: (on the div itself) and then in your CSS it would be something like

    Code:
    .item{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    }
    This way, it does not matter what the size of the div is, the background will automatically overflow (bleed) into the space.

    object-fit is good, however on browsers like IE it will be temperamental, so the above way is a better fallback.

    Hope this helps.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com