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;

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

有关背景大小的更多信息：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 回答