My site uses Owl Carousel to display images. The default image size is approx 2100 x 1600. On a desktop it looks correct. Looking at other sites they seem to have an image of full size but is cropped when on a different device.
As mentioned i am using Owl Carousel and wonder how i could do the same when the device is resized so that a part of the image is shown without resizing the image at 100% height only on a phone device (but also have the images rotating)?
First, for future reference, if you have not read our posting guidelines, please take a few minutes and do so.
Forum POSTING Guidelines (Posting Basics): (Help us help you!)
Basically, we ask our members to help us help them by posting relevent information about the issue, especially sufficient code to allow us to demonstrate the issue on our computers. A link to a test site is often adequate.
In this case, you are asking how to use a particular product.
I am not an Owl Carousel user so I will suggest that you read the references at the bottom of this post and see if they help you solve the layout issue on your own.
I can’t quite imagine exactly how you want the images to fit on the mobile device, anyway. It would be helpful if you can specify the height and width limits/ranges of the carousel window. For example 2100 x 1600 is many times too large to send to a mobile device where it will most likely be viewed at a lower resolution. It is usually best to transmit images at a smaller size and lower rez for mobile devices to save bandwidth and loading time. Finally, I’m not sure what is supposed to have a height of 100%, or more correctly, 100% of what. And the width? And how much cropping is permitted? So far, your needs are a bit vague. The mechanics of the layout are probably pretty straight forward and may be covered in the following Owl Carousel reference documnents, but they need to be fully described.