0

我通过css插入了一张图片。当我减小浏览器窗口的大小时,图像的大小保持不变,那么如何减小图像的大小。

我编码如下:

<div id="main-content">
    <br/>
    <div id="slideshow">

    </div>
</div>  

CSS如下:

#slideshow{
    background:url(img/image.png) no-repeat;
    height:512px;
    /*margin:auto 30px;*/
    margin:40px 28px auto;
    position:relative;
}

我做了谷歌非常多。但我不知道如何解决这个问题。请任何人都可以帮我解决这个问题。提前致谢..

4

3 回答 3

1

您不是在寻找更改图像,而是在寻找更改背景,这是非常不同的。

当元素更改时,您可以使用background-size使背景可调整大小。一些可能的值:

background-size: cover;
background-size: contain;
background-size: 100%;
background-size: 200px 300px;

我通常以不同的方式使用covercontains,两者都适合其容器的图像。试试看。

有关背景大小的更多信息:https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size

于 2013-05-29T09:30:31.273 回答
1

使用 CSS 背景属性来缩放图像

#slideshow {
background-size:cover;}
于 2013-05-29T09:31:35.273 回答
0

尝试这个

#slideshow{
    background:url(res/iphone_small.png) no-repeat;
    height:50%;
    /*margin:auto 30px;*/
    margin:40px 28px auto;
    position:relative;
}
于 2013-05-29T09:24:59.817 回答