Центрирование изображений в фреймах

Question

У меня есть iframe <iframe src="preloader.gif" id="graphFrame"...></iframe>.Я хотел бы центрировать изображение внутри фрейма.Я пробовал искать решения онлайн, но ни одно из них не работает.Можно ли это сделать с помощью простого CSS?Если нет, есть ли другое решение?

Answer 1

Нет, вы предоставляете изображение, а не HTML-страницу, поэтому CSS не применяется.

Оно будет действовать как изображение предварительного загрузчика, поэтому при загрузке реального содержимого оно будет наложено на изображение.preloader image

В таком случае я бы предложил вам:

1. Сделать фон iframe прозрачным, установив allowTransparency="true" Чтобы имя свойства чувствительно к регистру вInternet Explorer iirc.
2. Примените к фрейму следующие стили:

   background-image: url('preloader.gif');
   background-position: center center; background-repeat: no-repeat;

3. Присвойте src на html-странице с прозрачным фоном

   html, body {
     background-color: transparent;
   }

Как только содержимое загружается в iframe, оно покрывает загрузочное изображение. Рабочий пример

Answer 2

Мне нужно было центрировать изображение в iframe, и я не мог заставить CSS что-либо делать, поэтому вместо загрузки самого изображения я поместил изображение на небольшую html-страницу со встроенным стилем на теге body обивка: 0; Маржа: 0; и загрузил это в iframe вместо этого. Отлично отцентрировано без границ по краям!

Конечно, я сделал высоту и ширину iframe такими же, как высота и ширина изображения.