如何使我的图像响应宽度和高度？ [英] How to make my image responsive width and height?

问题描述

我的图片不会响应我的网站的其余部分。如何使它适应容器的大小。不只是宽度，还调整高度的大小？

I wont my image to be responsive like the rest of my website will be. How do i make it adjust to the size of the container. Not just the width but also resize the height?

图像在一个容器的最大宽度为1300px，所以我做了一个测试图像， 400px height and 1300px width

The image is in a container with a max-width of 1300px, so i have made a test image that has the sizes 400px height and 1300px width

这里是jsfiddle，所以你可以看看我的意思。

http://jsfiddle.net/z6fj8dtg/2/

Here is the jsfiddle so you can have a look at what i mean.
http://jsfiddle.net/z6fj8dtg/2/

    <div id="wrapper">
        <div id="codeback">
        </div>
        <div id="container">

        <div class="nav">
        </div>
        <div id="wrap">
            <div class="banner">
                <img src="http://s12.postimg.org/vnsghsvf1/banner.png" >
            </div><!-- END OF BANNER -->
        </div>
    </div><!-- END OF CONTAINER -->







 body{
        background-color:#272822;
        padding:0;
        margin:0;
    }

        #wrapper{
            width:100%; 
            height:inherit;
        }
        #codeback{
            width:100%;
            height:100%;
            background-image:url('capture.jpg');
              background-repeat: no-repeat;
            position:fixed;
            left:0px;
            top:0px;
            z-index:-1;

        }
        #container{
            width:100%;
            float:right;

        }
        .nav{
            margin-top:200px;
            width:80%;
            max-width:1300px;
            height:50px;
            float:right;
            background-color:black;
            position:relative;

        }
.fixedNav {
    position:fixed;
    margin:0;
    width:80%;
    right:0;
}

        #wrap{
            float:right;
            width:80%;
            max-width:1300px;
            height:1500px;
            background-color:white;
            box-shadow: -1px -1px 35px lightblue;
        }
        .banner{        
            max-width:100%;
        }

在分钟它只是坐在容器中，但溢出到右边。 / p>

At the minute it just sits in the container but overflows to the right.

推荐答案

是的，没有问题。只需插入以下CSS：

Yes that's no problem at all. Just insert the following CSS:

.banner img {
    width: 100%;
    height: auto; //Auto adjust height (maintain aspect ratio)
}

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