Создание адаптивного изображения в адаптивном поле без видимых проблем с содержимым в скорости страницы

Моя основная цель - загрузить черный ящик с изображением (подготовленным с помощью javascript). Я хочу, чтобы и изображение, и поле были отзывчивыми (правильно масштабировались во всех разрешениях), но я хочу, чтобы наибольшая ширина изображения была определенного размера. Пока вот мой код:

<html>
<head>
    <style>
        #mybox{
            background: #000;
            padding: 10px;
        }
        #picturesettings{
            max-width: 365px;
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="mybox">
        <div id="mypicture">
        </div>
    </div>
    <script>
        var mypicture=document.getElementById('mypicture');
        var newpicture=document.createElement('IMG');
        newpicture.id="picturesettings";
        newpicture.alt="new picture";
        newpicture.src="/path/to/image.jpg";
        mypicture.appendChild(newpicture);
    </script>
</body>
</html>

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

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

См. этот URL-адрес, если вы хотите увидеть в нем «приоритет проблемы с видимым содержимым».

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnew.clubcatcher.com%2Fm%2Fpictures%2Fstudio-entertainment-theatre%2F2016may06%2F1

Это мой веб-сайт, на котором размер коробки зависит от размера изображения.

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

Есть ли способ исправить это?


image css responsive size
person Mike -- No longer here    schedule 10.05.2016    source источник
comment
Вы можете легко добиться этого, вставив изображение в SVG, сделав width и height тега SVG 100%, а его атрибут viewbox соответствует разрешению (фактическому размеру) вашего изображения. Это будет масштабироваться пропорционально без использования JavaScript. Если вас интересует эта техника, я могу опубликовать ответ в ответ на комментарий.   -  person    schedule 10.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

почему бы не указать высоту для DIV и поместить изображение как фоновое изображение, чтобы под ним не было пробелов, я бы представил что-то вроде #mybox с рамкой: 10px сплошной #000; а затем используйте изображение в качестве фона для #mybox и присвойте ему размер фона: обложка; также вы можете изменить высоту окна с помощью медиа-запросов для других размеров экрана, если это выглядит не очень хорошо.

person Claudiu D.    schedule 10.05.2016
comment
Я не уверен, что функции CSS3 работают со старыми телефонами. И хотя медиа-запросы для блоков разной высоты — это идея, боюсь, мне потребуются миллионы таких строк для каждой высоты. - person Mike -- No longer here; 10.05.2016
comment
Я соглашаюсь на фиксированную высоту, где высота зависит от медиа-запроса. Кто-нибудь, пожалуйста, пожалуйтесь, если смартфон не поддерживает медиа-запросы. - person Mike -- No longer here; 11.05.2016