在一个 div 中,我试图在水平(宽度)和垂直(高度)方向拉伸(stretch)标题图像。似乎宽度拉伸(stretch)可以通过使用来解决:
background-size: cover;
background-size: 100% 100%\9; /* IE8 */
但是对于高度(垂直拉伸(stretch)),有没有办法做到这一点?跨浏览器可接受的最佳做法是什么?
<div style="background-image: url("http://ibuild.ph/eascongress/sites/default/files/logos-banners/header-1-revised.png"); background-size: cover; height: 135px;">
<div style="float: left;"><a href="/eascongress/index.php"><img style="width: 441px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/EAS-Logo-Theme-Header-Banner.png" alt="EAS Congress 2015 logo"></a></div>
<div style="float: right; padding-right:17px"><img style="width: 513px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/Global-Local-Benefits-Theme-Header-Banner.png" alt=""></div>
</div>
演示/开发站点链接 here
最佳答案
你已经试过了?
.yourclass{
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}
尝试设置 px,而不是百分比,看看是否有所不同。
观察:演示链接已损坏。
关于css - 背景图像拉伸(stretch)的内联样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25151459/