响应图像 [英] Responsive images

问题描述

我不是在寻找一个创造性的解决方案的图像，我已经阅读了大量的内容关于加载图像等。

I'm not looking for a inventive solution on the images, I've read plenty of content about loading images etc.

我只是做一些基本的响应设计，并想要加载一个大的图像，只是将其压缩，随着窗口变小。

I'm just doing some basic responsive design and want to load a large image and just squash it down as the window gets smaller.

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

The images aren't resizing as I'm resizing the window. What is the correct CSS syntax to achieve this?

谢谢：）

推荐答案

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

img {
    max-width: 100%;
}

http://jsfiddle.net/VBHhD/

我也会使用无序列表进行导航，但这只是我。

I would also use an unordered list for navigation, but that's just me.

这篇关于响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！