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 styles ，因此如果它们已经设置到位，您总是会覆盖之前的版本 - 您应该始终在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标题并在下次提供更准确的信息:) .. 设计响应式网格并不容易并且网络中有多种资源可供使用在尝试这样做时就开始了。例如：http://fluidbaselinegrid.com/和http://twitter.github.com/bootstrap/检查他们的代码并学习..什么来找我，我不是试图再次发明轮子，我只选择现成的响应式设计网格/框架作为基础根据我目前正在合作的项目。祝你好运，并为过度的回答感到抱歉！

Answer 2

确保先为图像设置固定宽度。

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

并将max-width设置为100％。

img {max-width: 100%;}

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

2 个答案: