Получение width и height у элемента и изображения

Вопрос-ответ HTML/CSS
1

Есть определенный код html, к примеру вот такой:

<body>
    <div class="container">
        <div class="baner">
            <img src="images/baner.png" alt="" id="image1">
        </div>
    </div>
    <div class="button">
        <div class="left-button">
            <a href="#">ПЕРЕЙТИ</a>
        </div>
        <div class="right-button">
            <a href="#">ПРОДОЛЖИТЬ</a>
        </div>
    </div>
</body>

Нужно через js получить width и height элемента с классом “container”. Ему в css в backgroung присваивается картинка. И нужно прописать определенные правила для ресайза. Вообщем с написанием JS правил проблем не возникает.

Не могу получить ширину и высоту контейнера и картинки. Нужно все реализовать через нативный JS. И сразу оговорюсь что css правила для данного кода прописаны через flexbox и размеры заданы в таких величинай как vh и vw. Если у кого то есть какие то соображения по этому поводу то help me!))

2

Способа получить размер изображения без вставки узла в DOM я не знаю.
Может того же эффекта отображения баннера можно достичь через вставки изображения через img? Как должно себя вести изображение в узле .banner?

Получить размер элемента можно на чистом js:

var offsetHeight = document.getElementById('myDiv').offsetHeight;

Или библиотечной из jquery.

3

Оно находится в центре. Класс .container имеет такие css правила:

display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;

Тем самым центрирует сам baner и у baner тоже прописаны такие же правила.