如何在 CSS 中以相对于父元素的百分比设置背景图像的宽度和高度？

如果我们使用图像作为子元素并希望以百分比设置高度和宽度，那么我们需要将父元素设置为某个固定大小。

方法一：

• 在这里，我们将在标签内使用 CSS，也称为内联 CSS 。
• 对于父 div，我们将根据屏幕大小通过指定 height: 500px和width: 40%来给出固定大小，并且我们将为其提供背景颜色和边框以清楚地使父级可见。
• 现在对于子图像，我们将给出宽度：60%和高度：70%。

输出：

方法二：

• 在这里，我们将编写 CSS in style 标签，也称为内联 CSS。
• 现在我们将通过给父级指定height: 500px和width: 40%来给它固定大小，并且为了清楚地定义父级，我们将给出 border-color 和 background-color。
• 最后，我们将给图像width: 50%和height: 45% 。

HTML

输出：