html - 带有背景图片的可调整大小的 div

标签 html css

我有一个带有背景图片的 div:

<div id="myDiv">
   ...
</div>

#myDiv {
   background-image: url(...);
   width: 70%;
   max-width: 200px;
}

现在,我希望调整背景图像的大小以适合 div。为此,添加了 background-size: 100%。这样就解决了宽度的问题,但是高度只容纳了内容,由于这个div的内容比较小,图片在底部被裁剪了。我应该为高度属性设置什么,以便它跟随宽度的调整?

最佳答案

如果我理解得很好,您希望背景被拉伸(stretch)并完全适合 div。在这种情况下,尝试以这种方式设置 background-size 属性的两个值:

background-size: 100% 100%;

关于html - 带有背景图片的可调整大小的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16669033/

相关文章:

css - 如何在我的 css 样式表中选择 JSX 标签

html - 解析器(例如 HTML)如何工作?

html - 忽略父级 CSS 以更改子级的背景

javascript - 将两个元素居中(高度基于容器和第二个元素的 IMG)

html - CSS,左右边框覆盖顶部的一部分

css - Bootstrap 折叠重叠

html - 如何将导航菜单居中对齐?

javascript - jQuery - 一旦增加浏览器缩放级别,UI 就会中断

javascript - Jquery Datatable 主题隐藏页眉/页脚 balk

Firefox 在 li 元素上不一致