响应图像

我不是找对图像的创造性的解决方案，我读过大量的内容有关加载图片等响应图像

我只是在做一些基本的响应式设计，并希望加载一个大的图像随着窗户变小，将其压扁。

我已经写了下面的CSS：

@media (max-width:420px){ 
    #header #logo{ 
     width:60%; 
     float:left; 
     background:red; 
    } 

    #header #logo #image{ 
     margin:5%; 
     width:20%; 
     float:left; 
     background:green; 
    } 

    #header #nav{ 
     width:40%; 
     float:left; 
     background:purple; 
    } 

    #header #nav #search{ 
     max-width:33%; 
     float:left; 
    } 

    #header #nav #account{ 
     max-width:33%; 
     float:left; 
    } 

    #header #nav #menu{ 
     max-width:33%; 
     float:left; 
    } 
}

和HTML去用它：

<div id="logo"> 
     <div id="image"> 
      s 
     </div> 
    </div> 
    <div id="nav"> 
     <div id="search"> 
      <img src="assets/images/mobile-search.png"/> 
     </div> 
     <div id="account"> 
      <img src="assets/images/mobile-account.png"/> 
     </div> 
     <div id="menu"> 
      <img src="assets/images/mobile-menu.png"/> 
     </div> 
    </div>

图像不调整，因为我调整窗口的大小。什么是正确的CSS语法来实现这一目标？

谢谢:)

来源

2013-07-20 sark9012

将max-width应用于您的图片。

img { 
    max-width: 100%; 
}

http://jsfiddle.net/VBHhD/

我也将使用导航无序列表，不过这只是我。

来源

2013-07-20 13:55:50 hungerstar

另一个提示：应用IMG属性最大宽度只有要被调整的IMG） – PaoloCargnin

我一直使用的导航链接，使得整个事情可以点击无JS的，从而使它可以中心点击鼠标。 – jdepypere

他们只是图像点击，将使用JS来显示菜单等。 – sark9012

在您的CSS您正在使用媒体查询的最大宽度为420px这是一个移动视图。你有没有试图调整你的浏览器在一个非常低的水平？ @media（max-width：420px）{＃header #nav #search img，＃header #nav #account img，＃header #nav #menu img { width：50％;

} http://codepen.io/anon/pen/kchqg

来源

2013-07-20 14:31:29

回答

相关问题