css - 背景图像拉伸(stretch)的内联样式

标签 css background-image inline

在一个 div 中,我试图在水平(宽度)和垂直(高度)方向拉伸(stretch)标题图像。似乎宽度拉伸(stretch)可以通过使用来解决:

background-size: cover;
background-size: 100% 100%\9; /* IE8 */

但是对于高度(垂直拉伸(stretch)),有没有办法做到这一点?跨浏览器可接受的最佳做法是什么?

<div style="background-image: url(&quot;http://ibuild.ph/eascongress/sites/default/files/logos-banners/header-1-revised.png&quot;); 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

enter image description here

enter image description 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/

相关文章:

css - 使用变量更新 Angular 组件内的内部 CSS?

css - 显示 :block inside display:inline

html - 使用 Font Awesome 图标时字体会发生变化

html - 背景图像不显示在 ios 上

jquery - jquery 淡入背景

html - 背景图像在底部被截断

带有静态局部变量的 C99 静态内联函数

javascript - 如何使<select>元素的宽度与<div>元素成比例

javascript - 为什么 style.cursor 方法在 xPage 上不起作用?

jquery - 动画在 IE11 上无法正常工作