在iPhone人像视图中图像无法缩放

Question

I'm working on a project where I have two images, one scrolling underneath the other. The top image ("glasses") has fixed positioning and z-index=1. The other image ("quote") is left as is and is underneath the first. When I viewed the website in portrait mode on my iPhone, the fixed glasses image gets cut off, while the quote image scales down and fits within the screen dimensions. It works fine on desktop and in landscape orientation. I've tried setting the width of the glasses image to 100% and using media queries to target the phone width, but I havent had much success. The glasses just get squeezed and lose their normal shape. I'd really appreciate any answers or suggestions.

Link to live project

Answer 1

the problem is in mobile/tablet views in general, not just iOS.

Remove min width and height from image and add

.quote,
.glasses {
  width: 100%;
}