我不是在寻找图像的创造性解决方案,我已经阅读了大量关于加载图像的内容。
我只是在进行一些基本的响应式设计,并希望加载一个大图像,然后在窗口变小时将其压扁。
我写了以下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语法是什么?
谢谢:)
答案 0 :(得分:6)
答案 1 :(得分:0)
在CSS中您正在使用媒体查询,最大宽度为420px,这是一个移动视图。您是否尝试过在非常低的级别调整浏览器大小? @media(max-width:420px){ #header #nav #search img,#header #nav #account img,#header #nav #menu img { 宽度:50%;