изменить размер div и его содержимое в окне браузера изменить размер

Question

возможно ли автоматическое изменение размера div и его содержимого при изменении размера окна браузера? Я хочу, чтобы текст не оборачивался. Я хочу настроить изображение и размер шрифта, чтобы иметь одинаковую композицию (или макет). Можно ли сделать это с помощью CSS? Спасибо Martin

Answer 1

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

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

@media all and (orientation:portrait) {
    body { color: red; }
}

, который закрашивает весь текст красным, когда ширина окна меньше его высоты.

Точнее, вы можете использовать ширину:

@media all and (max-width:800px) {
    body { color: red; }
}

Который будет окрашивать текст в красный цвет, если ширина окна меньше 800 пикселей. Попробуйте изменить размер этой страницы , чтобы увидеть эффект.

Чтобы быть более точным, требуется JavaScript.

Answer 2

Вы можете использовать метод изменения размера jquery. и вы можете поставить что-то вроде этого ...

$(window).resize(function() {
     if($(window).width() == 800)  // u can choose the size of the window also.
            $("any particular div").css("font-size":"14px");
});

так что вы можете добавить изменить размер шрифта или любую высоту изображения или что-нибудь ... и если вы не хотите использовать JQuery, то вы можете проверить ссылку ниже, РАЗМЕР ОКНА

но, с моей точки зрения, вы должны использовать Jquery ......

Answer 3

Я думаю, что следующее решение очень полезно для постоянного изменения размеров объектов - это только один пример:

CSS:

.scale
{
    font-size: calc(1vw + 1vh);
    width: calc(10vw + 10vh);
    height: calc(5vw + 5vh);
    padding: calc(1vw + 1vh);
    background-color: yellow;
}

HTML:

<div class="scale">
Resize container to resize me!
</div>

FIDDLE: https://jsfiddle.net/uxj77rg1/

Answer 4

Я хотел изменить размер изображения относительно соотношения родительского div и размера окна. Я использовал код, размещенный ниже. Проблема в том, что ширина изображения корректируется, но высота делится на 13 вместо 3,9 в моем случае. вы видите ошибку? спасибо

    var height = window.innerHeight;
    var width = window.innerWidth;

    var pic = document.getElementById('picture');
    var snimek = pic.childNodes[0];

    var heightRatio = snimek.clientHeight / height;
    var widthRatio = snimek.clientWidth / width;

    console.log(widthRatio +' x '+heightRatio);

    for(i = 0; i < snimek.childNodes.length; i ++)
    {
        if(snimek.childNodes[i].tagName == 'IMG') {

            if(widthRatio > 1 || heightRatio > 1) {
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
                if(widthRatio > heightRatio)
                {
                    snimek.childNodes[i].width /= widthRatio;
                    snimek.childNodes[i].height /= widthRatio;
                }
                else
                {
                    snimek.childNodes[i].width /= heightRatio;
                    snimek.childNodes[i].height /= heightRatio;
                }
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
            }
        }
    }