Forums

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

Home Forums CSS Full width Image without stretching/quality loss (ALSO RESPONSIVE)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #273776
    kippy
    Participant

    Hi All,

    Looking for the best option to use either as a background image of a div and/or an actual image within a div. Wanting the image to fit full width of any laptop/mobile device without quality loss of image. All methods I have tried to this point seem to stretch the image in a way that the quality of the image is drastically altered.

    Any suggestions or articles would be greatly appreciated!

    Thanks in advance for any help!

    B.

    #273779
    Pogany
    Participant

    Hi,
    This depends very much on what you want to achieve. I may suggest:

    .your_div{
       background-image:url(whatever.jpg);
       background-size:cover;
    }
    

    Of course, since I don’t know what you have in mind this may or may not do. If it doesn’t, please try to put your ideas in a very simple codepen.

    #273788
    kippy
    Participant

    I have tried this technique, but have run into a few issues with it. First, I feel it stretches the images and causes quality loss. How can I prevent the stretching. Image being used is 2000px by 350px, but still appears to be stretched. I have attempted to set max height and widths to correct the stretch with no luck.

    Also, with the larger image being used to try and avoid stretching, the responsive version is no where near centered or displaying a desired portion of the image.

    Again, any thoughts/suggestions are appreciated.

    Thanks.

    #273789
    Beverleyh
    Participant

    The suggested code sample works as expected, so if it isn’t working for you, you would need to show us your code in a simple demo so that we can work out why not. It sounds like you have some other code in the mix that is conflicting, indicated by this;

    the responsive version is no where near centered

    Which shouldn’t be happening because that isn’t the nature of cover. You can read more about its behaviour here https://css-tricks.com/almanac/properties/b/background-size/

    #273792
    kippy
    Participant

    I went in and started fresh with styles and apparently removed the conflict.

    Thanks for assistance.

    B.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.