响应式网页设计不适用于图片

Question

I'm trying to create responsive design webpage. it works well with my table and text (when I resize my browser, it resize automatically. but this does not happen to my picture.

CSS file:

@media screen and (max-width: 999px) {
 .page {
    width: 720px;
 }
 .header {
    width:720px;
 }
 img{
    width: 720px;
 }
}

@media screen and (max-width: 719px) {
 .page {
    width: 100%;
 }
 .header {
    width:100%;
 }
 img {
    width: 100%;
 }
}

@media screen and (max-width: 479px) {
 .page {
    width: 98%;
 }
 .header{
    width: 98%;
 }
}

.page {
  width: 960px;
  background-color: #fff;
  margin: 20px auto 0 auto; 
  border: 1px solid #496077;
}

img {
  float: left;
  width: 48%;
  margin: 0 1%;
}

My .aspx file:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
    <table border = "1">
<tr>
<td><center>'''Learning Outcome'''</center></td>
<td><center>'''Achievement Methods'''</center></td>
</tr>

<tr>
<td>Realistic problem solving and learning to learn skills</td>
<td>
my text here
</td> 
</tr>

<tr>
<td>Managing a real-time project from initiation to rollout </td>
<td>
my text here
</td>
</tr>

<tr>
<td>Understanding banking industry processes & practices</td>
<td>
my text here
</td>
</tr>

<tr>
<td>Team Cohesiveness</td>
<td>
*my text here
</td>
</tr>


</table>

<div>
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="DOMO">
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="image">
</div>

My text is responsive but my pictures are not, see the example at jsfiddle: jsFiddle

Answer 1

If you already have media-query stuff in place (and if you want full control over your image sizes) I would use those pixel widths you provided for images, If you are really doing more like a fluid-grid than column-based and you would like to scale your img all the time when resizing, I would try to use:

img{
    max-width: 100%;    
    _width: 100%;
}

As a side note: when you are dealing with responsive design page you should consider swapping larger images to smaller (or hiding them) when moving from desktop towards a mobile - this is because network latency, scaling big images to fit smaller devices screens takes more loading time to your page than using alternative eg mobile layout images instead.

Edit:

You are specifying img styles outside of your media queries, so you are always overriding your previous if they are even set in place - you should always specify default styles at start of the css file then followed by media-query rules (because they are screen-width specific), also it seems that your media-query widths are very ad-hoc I would use following base for a starters: (mobile first approach).

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
/* your styles */
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
/* your styles */
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
/* your styles */
}

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
/* your styles */
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
/* your styles */
}

/* DESKTOP */
@media only screen and (min-width: 1280px) { 
/* your styles */
}

/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) { 
 /* your styles */
}

If you had problems with your current file consider also fixing your html headers and providing more accurate info next time :).. designing responsive grid is not easy and there are multiple resources in network to get started when trying to do so. For example: http://fluidbaselinegrid.com/ and http://twitter.github.com/bootstrap/ inspect their code through and learn.. what comes to me, I'm not trying to invent wheel again, I just select ready made responsive design grids/frameworks as a base based on project I am currently working with. Good luck, and sorry for the overkill answer!

Answer 2

Make sure you set the fixed width to your images first.

<img src="image.png" width="100px"/>

and set the max-width to 100%.

img {max-width: 100%;}​