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:
Comments
Post a Comment