Question

我已经通过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;
}

我非常喜欢谷歌。但我没有得到如何解决这个问题。请任何人帮我解决这个问题。提前谢谢..

Answer 1

您不是在寻找更改图片，而是希望更改背景，这是非常不同的。

您可以使用background-size在元素更改时使背景可调整大小。一些有意义的价值观：

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

我通常使用封面或包含，两者都以不同的方式将图像放入其容器中。尝试一下。

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

Answer 2

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

#slideshow {
background-size:cover;}

Answer 3

试试这个

#slideshow{
    background:url(res/iphone_small.png) no-repeat;
    height:50%;
    /*margin:auto 30px;*/
    margin:40px 28px auto;
    position:relative;
}

当我们减小浏览器大小时如何减小图像的大小。

3 个答案: