Содержит содержимое iframe для размера iframe на мобильном телефоне

Question

У меня проблемы с iframe на мобильном сафари. У меня есть следующий невероятно простой код укладка мой IFRAME:

#iframe { 
    width: 400px; 
    height: 250px; 
    border: none; 
    background: #eee; 
    z-index: 1; 
} 

https://jsfiddle.net/canyondellomo/1be4zf86/2/.

На рабочем столе изображение собаки содержится в размерах iframe. Однако, когда страница загружается на мобильный, содержимое iframe полностью игнорирует размер iframe и расширяется до полного размера.

Не могли бы вы мне помочь?

спасибо

Answer 1

Это звучит как изображение больше, чем когда IFRAME масштабируется вниз на мобильный.

Попробуйте установить этот стиль в классе Изображения в:

max-width:100%;

(или любой другой ширину вам нужно быть)

Это может сделать его лучше масштабируется. Если это не работает, поиграйте с настройкой размера, используя проценты. Проценты основаны на том, сколько места в контейнере, а не на размере самого изображения