Question

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
}

我使用上面的css代码来显示500x500 image。它在屏幕上显示得很好，但是有一种方法可以在我调整窗口vertically的大小时将图像调到not resize（滚动条出现），但是当我将窗口horizontally调整为{时{1}}它的新宽度是否适合屏幕？感谢

Answer 1

不要在PX Insted use％

中指定宽度和高度

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 50%;
    height: 50%; /* both as much you want */
}

或者使用媒体查询。

CSS图像水平调整大小

1 个答案: