html - Adjust Image Size in Mobile Site -


i facing trouble in adjusting image size in mobile website. unfortunately image stretches width of screen. issue comes on blog on website.

the blog software generates code images declaration of width/height unfortunately can not change. therefore looking overwrite them css file.

<div class="leftbox"> <img src=".mysite.net/blog/media/photo/indian_tourists.jpg" width="400" height="267" alt="indian tourists" title="indian tourists" /> 

i tried using following code overwrite image size fit screen not working.

i use css code overwrite floating image leftbox.

@media screen , (max-device-width: 640px) {  .imgleft {      float:none;      margin:0;  }  

}

this code fit image size in screen.

    .leftbox img {    height: auto !important;    max-width: 100% !important;  }  .content img {     width: auto!important;      height: auto!important;      max-width: 100%!important;      max-height: 100%!important;  } 

for reason, none of these codes working on website - http://www.easydestination.net/blog/. see blog through mobile browser understand. how can prevent image stretching screen.

basically, have add media query decrease image size accordingly, try:

@media screen , (min-device-width: 375px) , (max-device-width: 667px) {     .leftbox img {         width: 400px;         height: 300px;     } } 

then see this:
enter image description here


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -