Как изменить размер элемента Java Script, чтобы он соответствовал его окну контейнера

Я столкнулся с проблемой, которую я действительно не понимаю.

У меня есть веб-просмотр (на Android и iOS), который может иметь один из трех возможных размеров в зависимости от того, где я показываю его. (например, 600 x 50 или 500 x 45).

Используя CSS, мне удалось сделать изображение, которое всегда появляется, чтобы заполнить 100% веб-просмотра. Однако есть еще один элемент, который я должен сделать, чтобы он также заполнил 100% этого контейнера. Этот элемент загружается следующим кодом:

<div class='amoad_native' data-sid='123456789'></div>          

<script src='http://j.amoad.com/js/n.js' type='text/javascript' charset='utf-8'></script>

И я также применяю к нему следующий CSS:

position: absolute;
z-index: 2;
left: 0;
top: 0;

Но даже если я добавлю ширину: 100% и высота: 100%, кажется, полностью не затронута ею. Единственное, что, кажется, изменило его "размер" - это окно просмотра:

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Но это выглядит иначе, в зависимости от используемого им устройства.

Вот как это выглядит на iPhone 5:

И вот как это выглядит на iPhone 6s Plus

Оба устанавливаются с использованием шкалы видового экрана 0,9. Но моя цель действительно в том, чтобы PR Box полностью заполнил свой контейнер. (Вы можете видеть то же изображение сзади, потому что это просто нормальное изображение, которое я показываю на случай, если PR Box не может быть загружен из-за отсутствия подключения к Интернету или что-то в этом роде.

Ответ 1

Вы можете попробовать jquery-решение, я не совсем уверен, что вы пытаетесь достичь, но надеюсь, что это поможет.

Демо: https://jsfiddle.net/po6vdyo9/

  $(document).ready(function() {

$(window).resize(function() {

  // Height will be calculated acording to window height can be changed to whaterver element u require
  var docHeight = $(window).outerHeight();

  function resizebanner() {
    $('#banner').height(docHeight);
  }

  resizebanner();

})
$(window).trigger('resize');});

Ответ 2

Попробуйте следующее:

position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
right: 0;

Ответ 3

Используйте vh и vw:

min-width: 100vw;
min-height: 100vh;

Ответ 4

1) Убедитесь, что веб-просмотр - это фактически тот размер, который вы хотите. Может быть, контент хорош, но веб-просмотр не имеет размера/расположения правильно.

2) Убедитесь, что родительский элемент amoad_native в html doc заполняет область веб-просмотра. Установите высоту и ширину этого парня.

Если у вас есть два дочерних элемента, и вы хотите, чтобы они оба заполнили родительский элемент, у вас должна быть такая структура:

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent {
  height: 100%;
  width: 100%;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%
}

Ответ 5

Родитель относительный?

<div class="parent">
  <img src="http://static.tumblr.com/a4deb37c05fa96b6128b0e097d45c745/oud8baz/mKQmt73js/tumblr_static_sky_banner.jpg" class="theimage">
  <div>
    
    <style>
    html,body{
    width:100%;
    margin:0 auto;
       }
    .parent{
float:left;
position:relative;
float:left;
width:100%;
height:200px;
}

.theimage{
position: absolute;
width:100%;
height:100%;
z-index: 2;
top: 0;
left: 0;
margin:0;
padding:0;
}
      
      
    </style>

Ответ 6

Я думаю, вы можете исправить это, применив старую школу reset к некоторому целевому css. Вероятно, вы получаете по умолчанию дополнение или маржу, применяемые разными браузерами. Попробуйте применить это:

*{
padding: 0 0 0 0;
margin: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border: 0 0 0 0;
}
#My_Image{  
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             box-sizing: border-box;
             height:100%;
             width:100%;
}

В этом случае это должно работать, даже если вы не можете переопределить значение по умолчанию /margin, потому что свойство размера окна подсчитывает их как часть высоты/ширины.

Ответ 7

Кажется, что вы сталкиваетесь с проблемами с соотношением пикселей.

В iPhone 5 соотношение пикселей 2, но в iPhone 6 Plus соотношение пикселей 3. Поэтому, если изображения не готовы к отображению сетчатки, вы получите небольшое изображение в устройствах с высоким соотношением пикселей.

Вы можете использовать background-size. Однако решения, которые вы получите здесь, станут чистой спекуляцией, так как вы не делитесь с нами визуализированным HTML, мы не можем вам помочь.

Мое предложение: добавьте это в поле (если изображение является фоном):

background-size: cover;
width: 100%;

Если изображение является тегом <img>:

width: 100%;
height: auto;

Ответ 8

Мне не удалось загрузить ресурс с тегом script. Вот баннер, который всегда занимает 100% ширину. Мой метатег немного отличается от вашего. Возможно, это была проблема.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
            }
            #banner {
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <img id="banner" src="https://upload.wikimedia.org/wikipedia/commons/6/67/Ha_Long_bay_%28Vietnam%29_banner_Islands_in_the_bay.png" />
        </div>
        <script>
            var banner = document.getElementById("banner");
            banner.style.width = '100%';
        </script>
    </body>
</html>