Как прописать CSS для изображений если их ширина меньше 200px и они в тексте статьи внутри тега div#content

Как прописать CSS для изображений если их ширина меньше 200px и они в тексте статьи внутри тега div#content


<!-- Код для изображений если их ширина меньше 200px и они находятся внутри тега div#content -->

document.addEventListener('DOMContentLoaded', function() {
    // Находим контейнер #content
    const content = document.querySelector('#content');
    if (!content) return;

    // Находим все <img> внутри #content
    const images = content.querySelectorAll('img');

    images.forEach(function(img) {
        if (img.complete) {
            checkAndStyle(img);
        } else {
            img.addEventListener('load', function() {
                checkAndStyle(img);
            });
        }
    });

    function checkAndStyle(img) {
        // clientWidth = отображаемая ширина на странице
        if (img.clientWidth < 200) {
            img.classList.add('narrow-image');
        }
    }
});


И добавить css

body img.narrow-image {    width: 100px;    height: 120px;    float: left;    margin: 5px;}

guest
Другие сообщения форума
Закрыть меню