locked
Fixing images with hardcoded width RRS feed

  • Question

  • User-851246726 posted

    In our webpages, there are thousands of images in which width is hardcoded like this:

    <img alt="Image" border="0" src="http://www.imageurlhere.com/image.jpg........" width="50%" />

    Problem: On mobile phones, the image gets really small and it is not possible to update the content since thete are thousands of images and that will be a lot of manual work. Also, there are NO IDs or CLASSES assigned to these images.

    I ONLY want to fix images with hardcocded style 50% and other images should remain unaffected.

    What I have so far: I have created this javascript solution but it is not working. Can anyone help?

    <style>
    
    @media (max-width: 767px) {
    .fix50percentimages{width:100%; height:auto;}
    }
    
    </style>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){ 
    
    
    var width = $('img').width();
    var parentWidth = $('img').offsetParent().width();
    var percent = 100*width/parentWidth;
    
    if (percent = 50) {
            
                $('img').addClass('fix50percentimages');
            }
    
    });
    
    
    </script>

    Tuesday, November 14, 2017 3:54 PM

Answers

  • User753101303 posted

    I would use rather CSS. What if you try :

    @media (max-width: 767px) {
       img[width="50%"] {width:100%; height:auto;}
    }
    
    

    You have a bunch of less used but powerfull CSS selectors and jQuery can use the same selectors as well:

    https://www.w3schools.com/cssref/css_selectors.asp

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 14, 2017 4:55 PM

All replies

  • User753101303 posted

    Hi,

    Keep in mind you are processing a list of images. Your code is not really suitable for that. Also it seems you are trying to compute some actual percentage rather than just testing for the attribute. Finally never stop at seeing that your code "doesn't work". Use F12 Console and the JavaScript debugger to see what actually happens.

    I would try something such as:

    $("img[width='50%']").attr("width","100%");

    This selector allows to select all images with a 50% width attribute and this value is then changed to 100% instead. You could also try the same selector in a CSS stylesheet.

    Tuesday, November 14, 2017 4:31 PM
  • User-851246726 posted

    Hi , thank you for your reply.

    Your code works great but it sets 100% width for all images with 50% on all screen sizes.

    I only want to set width 100% when images are viewed on mobile phone. Right now, small images are being stretched to 100%.

    How can I set 100% only on mobile? 

    Tuesday, November 14, 2017 4:43 PM
  • User753101303 posted

    I would use rather CSS. What if you try :

    @media (max-width: 767px) {
       img[width="50%"] {width:100%; height:auto;}
    }
    
    

    You have a bunch of less used but powerfull CSS selectors and jQuery can use the same selectors as well:

    https://www.w3schools.com/cssref/css_selectors.asp

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 14, 2017 4:55 PM
  • User475983607 posted

    Try this

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                $('img').each(function (index, value) {
                    let width = Math.round($(this).width() / $(this).parent().width() * 100);
                    console.log(width);
    
                    if (width == 50)
                    {
                        $(this).removeProp('width');
                        $(this).addClass('fix50percentimages')
                    }
                });
            });
    
    
        </script>
    
        <style>
            .fix50percentimages {
                width: 100%;
                height: auto;
            }
        </style>
    
    </head>
    <body>
        <img src="content/Registration.png" width="10%" />
        <img src="content/Registration.png" width="50%" />
        <img src="content/Registration.png" />
        <img src="content/Registration.png" width="50%" />
    </body>
    </html>
    
    

    However, use a selector as suggested above.

    Tuesday, November 14, 2017 4:56 PM
  • User-851246726 posted

    Thank you both!!

    Tuesday, November 14, 2017 5:05 PM