how i can resize images when display website in mobile ?
or res is <700px when images have 200px; weight
or res is <300px when images have 1500px; weight
etc. Thank you.
Printable View
how i can resize images when display website in mobile ?
or res is <700px when images have 200px; weight
or res is <300px when images have 1500px; weight
etc. Thank you.
Foysal, I'm not going to talk about media queries, because that stuff is complicated. Just add this to your css:
img { max-width: 100%; height: auto }
That will ensure that your image is never bigger than it's container and the height:auto will make sure the image is resized proportionately. If your images have hard-coded heights and widths, you need to add !important.
Hi RDesignista,
Thanks for your reply. I like ask you that
a) Where I should use "img { max-width: 100%; height: auto }" this code? I mean "head" section or "body" section?
b) You know that a web page could be included many pictures. Suppose my web page includes 10 pictures. Should I use "img { max-width: 100%; height: auto }" this code along with each images?
No more, I am waiting for your kind response.
Thank you.
Foysal,
a - You put that code in your css area. Some people put css in their <head> area (see example below) or they make a link to an external css file. Just put it in your <head> for now, to make things easy.
b - The beauty of CSS is that you can easily affect all elements, certain elements, or just one. When you make a CSS rule for 'img', it affects all images on the page. Want to only affect one element? Create a CSS class for the elements you want to affect, then add class-specific CSS:Code:<head>
<style>
img { max-width:100%; height: auto }
</style>
</head>
Both images will fit mobile views, but coffee.jpg will have a 1 pixel, solid, yellow border around it. Try it.Code:...
<head>
<style>
img { max-width: 100% ; height: auto }
.yellow-border { border: 1px solid yellow }
</style>
</head>
<body>
<img src="coffee.jpg" class="yellow-border" />
<img src="juice.jpg" />
...
Thank you. I am trying.