HTML – 响应式图像

概述我不是在寻找图像的创造性解决方案,我已经阅读了大量关于加载图像等的内容. 我只是在进行一些基本的响应式设计,并希望加载一个大图像,然后在窗口变小时将其压扁. 我写了以下CSS： @media (max-width:420px){ #header #logo{ width:60%; float:left; background:red; 我不是在寻找图像的创造性解决方案,我已经阅读了大量关于加载图像等的内容.

我只是在进行一些基本的响应式设计,并希望加载一个大图像,然后在窗口变小时将其压扁.

我写了以下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语法是什么？

谢谢 ：)

解决方法 将最大宽度应用于图像.

img {    max-wIDth: 100%;}

http://jsfiddle.net/VBHhD/

我也会使用无序列表进行导航,但那只是我.

总结

以上是内存溢出为你收集整理的HTML – 响应式图像全部内容，希望文章能够帮你解决HTML – 响应式图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。