0

I am trying to make all images width as 100% present in a div with name "res". Here is the code I used but its not working in mobile. Can anyone suggest me the better code.

For more clarity check the page

PHP CODE

<?php
      echo '<div class="res"><img src="image.jpg" /></div>';
?>

CSS CODE

div.res>img
{
    width:100%;
    height:auto;
}

HTML CODE

<body>
<?php require 'test.php'; ?>
</body>
James Z
  • 12,209
  • 10
  • 24
  • 44
venkata kiran yaragudipati
  • 3
  • 6
  • No no. I'm not clicking that link and also this seems to be a css issue – Rotimi Mar 25 '18 at 15:32
  • you didn't close the div.... `'
    '` however that alone may not fix it. you may have to use javascript. images can be finicky     – ArtisticPhoenix Mar 25 '18 at 15:32
  • Sorry while posting question I forget to close. – venkata kiran yaragudipati Mar 25 '18 at 15:34
  • probably the div needs it's size defined, as it will suffer from shrinkage... But you might have to use some other CSS, I would have to do some testing and I feel to lazy right now. 100% of the div, with no width is the width of the image or something like that. Width is based on the parents width... – ArtisticPhoenix Mar 25 '18 at 15:36
  • This is a somewhat related question, but not an exact duplicate https://stackoverflow.com/questions/3463664/make-an-image-width-100-of-parent-div-but-not-bigger-than-its-own-width – ArtisticPhoenix Mar 25 '18 at 15:41

1 Answers1

0

There is a few issues with your code, here is the markup I see on your page :

<div class="res">
    <h3>
        <img src="image.jpeg" style="width: 576.766px; height: 384.532px;">
    </h3>
</div>

The image tag is embedded in a h3 tag, meaning that your css selector .res>img {} won't work. You are here targeting the direct children img tags of the .res div, not all the img tags included in that div. What you want to do is to use a selector like .res img {}

Secondly, you are using inline styles in your img tag which are preceding over your css, meaning that your css stylesheet will be ignored in that case.

To conclude, here are the steps to resolve your problems :

  • Try to avoid embedding images in a h3 tag as it has no semantic meaning in that case
  • Fix your css selector to correctly target the images
  • Remove the inline styles
  • Bonus : try not to base-64 encode large PNG files for performance purposes, but that is another story...
GuCier
  • 6,919
  • 1
  • 29
  • 36