image real size

by Satheesh Kumar

HTML

<!-- <img id="myImage" src="https://i.stack.imgur.com/1ZIkv.jpg?s=328&g=1"> -->
<div class="flex">


</div>

CSS

*{
  box-sizing: border-box;
}
#myImage{
   max-width: 100%;
}
.flex{
  display: flex;
    flex-wrap: wrap;
}
.flex .content{
  width: calc(100% / 6);
  margin-bottom: 15px;
  padding: 10px;
}
.flex .content div{
  background: red;
    height: 30px;
}
@media (max-width:768px){
.flex .content{
  width: calc(100% / 3);
}  
}

JavaScript

/* var $img = $("#myImage");
console.log(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
); */

var a = 0;

for(a=1;a<=30; a++){
$(".flex").append('<div class="content"><div>'+a+'</div></div>')
}