Fatal编程技术网
  • jquery/
  • Jquery css：使背景图像适合div的高度和宽度

Jquery css：使背景图像适合div的高度和宽度

jquery html css image twitter-bootstrap

Jquery css：使背景图像适合div的高度和宽度,jquery,html,css,image,twitter-bootstrap,Jquery,Html,Css,Image,Twitter Bootstrap,在引导模板中，我添加了一个图像作为背景，如下所示 background:url(../images/banner.png) no-repeat; background-size: 100%; 这些css规则的问题是，图像只显示图像的中心部分，这是根据div的高度添加的，我希望图像显示到其全部高度，而不是仅显示小的中心部分 请参阅屏幕截图以更好地理解 试试这个 background-size: contain; 请尝试使用您的代码来解决此问题 background:url(../images/

在引导模板中，我添加了一个图像作为背景，如下所示

background:url(../images/banner.png) no-repeat;
background-size: 100%;
这些css规则的问题是，图像只显示图像的中心部分，这是根据div的高度添加的，我希望图像显示到其全部高度，而不是仅显示小的中心部分

请参阅屏幕截图以更好地理解

试试这个

background-size: contain;
请尝试使用您的代码来解决此问题

background:url(../images/banner.png);
background-repeat:  no-repeat;
background-size: 100%;
再加上这个

html{
height: 100%;
}

div{
高度：100px；
宽度：100px；
背景：url(http://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg)不重复；
背景大小：100%；
}
会给你想要的结果

但我不推荐。
背景：url（../images/banner.png）不重复；
背景尺寸：包含；
如果图像的高度为400px，而
div
的高度仅为100px，它将如何充分显示图像？然后还需要增加
div的高度。与
content
不同，背景图像的大小不能影响
div
的高度（也就是说，它不能使
div
展开以适应图像）。我们不能使用css压缩图像高度吗？但是压缩与显示图像的全高不同，所以问题应该修改。请，提供jsfiddleheight是合适的，但width并不是如何使其适合宽度。因为你想压缩图像。这不是一个好的做法。您必须保持图像的纵横比。在这种情况下，您必须牺牲部分图像。所以，
背景尺寸：封面是最好的方法

background-size: 100% 100%;