Question

我已输入宽度：100％但它不会对任何内容做出响应。如何让标题响应所有浏览器和ipads，手机等？

.head-wrap {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-prodigy-dumbell-weight.jpg) top no-repeat;
margin: 0;
height: 480px;
width: 100%;
}

.site-header {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/Prodigy-Performance-we-are-prodigies4.png) no-repeat;
margin: 0;
width: 100%;
height: 420px;  
}

.site-header .wrap {
padding: 16px 0;
padding: 1rem 0;
}

Answer 1

您可以尝试将标题的background-size样式设置为100%;您可能正在处理一些浏览器兼容性问题（请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）

您还可以删除background-image属性，并使用绝对定位填充普通img元素的内容，然后将这些img元素设置为宽度：100％;

你的div也被限制在420px的高度，这将搞砸了。设置最大高度为420px，自动height（请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/max-height）

您可能必须使两个背景重叠的背景图像具有相同的大小（因为尺寸不同，它们可能具有不同的宽度/高度比率），并且使用一些媒体查询来清理事物，但是，它100％工作。

如何让我的标题在所有媒体上响应？

1 个答案: