html - Why do I need to set a display type for displaying my image on a mobile viewport? -

I have an image inside a div when I use the code given below to display the image on my desktop I see, it looks fine. But when I used the same code to display it on a mobile device, the image is not displayed, unless I added the display: block; I did not tell all the video and articles I had read to display images for both image and container developer, that I have to use the display: block; So I do not understand why I need to use it to display on mobile Why is it that I do not have to use a display: block for any desktop, but I do for mobile phones Am I

CSS for desktop view:

  .index-image {width: 100%; }. Index-image & gt; IMG {width: 100%; }  

HTML for desktop view:

  & lt; Div class = "index-image" & gt; & Lt; Img src = "images / coding.jpg" /> & Lt; / Div & gt;  

CSS for mobile view:

  .index-image-mobile {display: block; Width: 100%; } .index-image-mobile & gt; IMG {display: block; Width: 100%; }. Index-image {display: none; }  

HTML for mobile view:

  & lt; Div class = "index-image-mobile" & gt; & Lt; Img src = "picture / coding-mobile.jpg" /> & Lt; / Div & gt;  

thanks