Topic: MDB Free 4.3.2 > Image Distortion in Image Sliders

surface2air free 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 Wierzbicka staff 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 free 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 Wierzbicka staff commented 6 years ago

You're welcome.

surface2air free 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

surface2air free 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

 

 


Marta Wierzbicka staff 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

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags