Question

我正在尝试了解百分比大小和背景图像的DIV。所以......

.mydiv
{
float: left;
width: 20%;
background-image: url('myimage.png');
padding-bottom: 20%;
background-size: cover;
-moz-background-size: cover;  /* Firefox 3.6 */
background-position: center;  /* Internet Explorer 7/8 */
}

观点并不太糟糕。无论如何，我希望改进它，以获得响应式网站。

myimage.png＆gt;＆gt; 1920 x 964

我搜索并找到了一些教程。但是......我被困住了。我不想使用javascript来管理调整大小。 我试图找到使用CSS的最佳方式，主要是学习和改善图像视图作为背景

任何人都可以帮助我吗？谢谢！

Answer 1

用于响应式背景设置width:100%

示例：

.mydiv
{
float: left;
width: 100%;
background-image: url('http://bestinspired.com/wp-content/uploads/2015/03/4-Nature-Wallpapers-2014-1.jpg');
background-repeat:no-repeat;
background-position:center;
background-size: cover;
-moz-background-size: cover;  /* Firefox 3.6 */
background-position: center;  /* Internet Explorer 7/8 */
}

jsfiddle

Answer 2

是的......但仍然是WIDTH和HEIGHT比例之间的问题。我现在使用100％的填充底部，所以我是一个“方形div”。是不是另一种改善背景图像视图的方法？再次感谢！我想学习：D

DIV背景图片的百分比为

2 个答案: