asp.net - 响应式网页设计不适用于图片

Question

我正在尝试创建响应式设计网页。它适用于我的表格和文本(当我调整浏览器大小时，它会自动调整大小。但这不会发生在我的图片上。

CSS 文件:

@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%;
}

我的 .aspx 文件:

<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>

我的文字是响应式的，但我的图片不是，请参阅 jsfiddle 上的示例: jsFiddle

Answer 1

如果你已经有了媒体查询的东西(如果你想完全控制你的图像大小)我会使用你为图像提供的那些像素宽度，如果你真的做的更像一个流体网格而不是列-基于并且您想在调整大小时一直缩放您的 img，我会尝试使用:

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

旁注:当您处理响应式设计页面时，您应该考虑在从桌面移动到移动设备时将较大的图像交换为较小的图像(或隐藏它们)——这是因为网络延迟，缩放大图像以适应较小的设备屏幕比使用替代方法(例如移动布局图片。

编辑:

您在媒体查询之外指定了 img 样式，因此即使它们已就位，您也总是会覆盖以前的样式 - 您应该始终在 css 文件的开头指定默认样式，然后再跟进通过媒体查询规则(因为它们是特定于屏幕宽度的)，而且您的媒体查询宽度似乎非常特别我会使用以下基础作为初学者:(移动优先方法)。

/* 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 */
}

如果您当前的文件有问题，请考虑修复您的 html header 并在下次提供更准确的信息 :)..设计响应式网格并不容易并且网络中有多种资源可供获取尝试这样做时开始。例如:http://fluidbaselinegrid.com/和 http://twitter.github.com/bootstrap/检查他们的代码并学习.. 我想到了什么，我不想再次发明轮子，我只是选择现成的响应式设计网格/框架作为我目前正在处理的元素的基础。祝你好运，很抱歉回答过于矫枉过正!