MDB Free 4.3.2 > Image Distortion in Image Sliders

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: MDB Free 4.3.2 > Image Distortion in Image Sliders

surface2air asked 7 years ago

Hi MDB Support,

I have been recently contacted by a client who has alerted me to image distortion and stretching on her site's image sliders on iOS devices.

Her web site is:

http://iole.org

I propped her site earlier last year in 2017 using the following libraries with the MDB Framework:

MDB Free 4.3.2 / Bootstrap v4.0.0-alpha.6

I have confirmed that these images are distorted. I am running iOS 11.2.1 on an iPhone 7.

Please help assist with this issue.

Happy New Year! Thanks!

Eric,

Seattle, Washington

Marta Szymanska staff pro premium answered 7 years ago

Hi, could you specify what is the problem because I've checked your website on the newest iOS and I don't see any problem. Best, Marta

surface2air answered 7 years ago

Hi Marta,

Thanks for checking. I captured a few screenshots of her site on my iPhone, and if the images from the mobile display (Safari on iOS 11) are compared with the same pages on a laptop or desktop display, image is showing vertical stretching in portrait mode. It appears that the image classes are adjusting the image responsiveness according to device display as opposed to adjusted aspect ratio.

See attachments in the Google Drive:

https://drive.google.com/open?id=0B-XsGOxk_myCLUxIb0tiZndhOTg

 

Thank you,

Eric

 

 

surface2air answered 7 years ago

I have propped a folder called Iole-MDB On Google drive with five screen captures: https://drive.google.com/open?id=0B-XsGOxk_myCLUxIb0tiZndhOTg

Marta Szymanska staff pro premium answered 7 years ago

Hi,

change your .carousel-item div to this:

<div class="carousel-item">
 <div class="view">
  <img src="http://iole.org/img/exhibitions/give-gallery-01.png" class="img-fluid" alt="Give Gallery">
 </div>
</div>

Best,

Marta

surface2air commented 7 years ago

Hi Marta, Thanks! The solution is perfect. I am working through all of her Exhibition image carousel images with the added div. Have a great weekend! Best, Eric

Marta Szymanska staff pro premium commented 7 years ago

You're welcome.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
surface2air
47Support score
20Questions 12Answers
0Snippets likes 0Snippets