我知道如何拉伸背景图像以适合其容器(具有background-size属性).但是如何在不手动设置宽度和高度的情况下实现相反的方法呢？
为了更好地说明我的观点,假设我们有一个带有一行文本的p元素,并将其背景图像设置为800 * 600px的图片.如何自动将p的宽度和高度调整为800 * 600？
我问这个问题是因为我正在寻找更好的工作流程.每次我在Photoshop中更改图像大小时,在CSS中更改宽度和高度都非常烦人.工作流程如下：
>在Photoshop中更改图像(可能最终图像尺寸略有不同)
>记住新的维度
>进入CSS文件,查找将该图像用作bg的特定元素
>更改元素的宽度和高度(如果我仍然记得它们正确..)
解决方法
您可以使用img元素并将包含div的显示设置为内联块,而不是使用背景图像.然后,您需要创建一个内部div来包装内容并将其相对于包含div进行绝对定位.由于img是流中的唯一内容,因此包含div将相对于图像调整大小.
几乎是一个黑客,但我认为它会产生你正在寻找的效果.
HTML
<div class="wrap">
<img src="yourImg.jpg" />
<div class="content">
<!-- Your content here -->
</div>
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
.wrap img + .content {
position: absolute;
top: 0;
left: 0;
}
