响应式设计图片无法缩放

本月我在网络标准设计课程中学习HTML/CSS，本周我们正在修复我们的网站以进行响应。响应式设计图片无法缩放

我已将所有px转换为百分比，并将所有字体从px转换为em。我在我的画廊上弄乱了最大宽度：100％。

我会发布我的链接，而不是所有的代码。

http://jgoldd.github.io/wsd/index.html

2013-07-25 Justin Goldman

顺便说一句，该网站假设是100％，但他们要求我们遵循一些设计规则，不能做任何我想要的。再次感谢 –

就拿宽度和保证金关你的身体标记。建立一个叫做一个包装类，并添加它里面的容器，例如

.wrapper{ 
    max-width:960px; 
    margin:0 auto; 
    width:100%; 
} 

<header> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</header> 

<div id="content"> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</div> 

<footer> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</footer>

如果你不想这样做，你可能只是你的身体设置为

body{ 
    max-width:960px; 
    width:100%; 
}

不过，我想你的结构改变用包装的方式是很好的从一开始就练习干净的代码卫生:-)

来源

2013-07-25 23:51:39

为我的所有元素添加了包装，并将该类添加到了CSS中，但它仍然不会调整大小：/ –

我看到，您希望将这些图像放入媒体查询中，以使#gallery_container和图像内部宽度100％ –

你将需要玩一下，但是这里有一点让你朝着正确的方向前进。（删除我评论的删除线）

#gallery li{ 
    width: 49%; 
    display: inline-block; 
    .display: inline; /* for IE 8 */ 
    zoom: 1; /* for IE 8 */ 
    /* float: left; REMOVE */ 
} 

#gallery img { 
    width: 100%; 
    /* max-width: 100%; REMOVE */ 
} 

#gallery_container{ 
    width: 100%; 
    /* width: 41.666667%; REMOVE */ 
}

试试看。应该给你更好的结果，并希望让你到你想要的地方。

来源

2013-07-26 04:18:08 ericjbasti

你的css太麻烦了。所以，让我解释一下你一个简单的技术来激活响应行为，以图像

在HTML

<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">

CSS

.resize { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
}

此代码简单激活上的图像的响应行为试试这个代码。

如果您有任何疑问，请告诉我...！ :)

来源

2013-07-26 06:18:20 WhitehatK

响应式设计图片无法缩放

回答

相关问题