css - 是否可以设置由 "content"属性添加的图像的样式

Question

这是我的代码:

#my_div:before
{
  /* displaying the image */
  content: url("img path");
  /* centering the image */
  display: block;
  text-align: center;
  /* making the image responsive */
  max-width: 100%;
}

<div id="my_div"></div>

我试图通过 max-width:100% 属性使图像响应，但它不起作用

我的问题:有可能做这样的事情吗？

编辑

这个问题不是重复的，我希望尺寸在屏幕调整大小时自动缩放，而另一个问题为图像设置固定大小

Answer 1

试试这个:

#my_div:before
{
  /* displaying the image */
  content: url("img path");
  /* centering the image */
  display: block;
  text-align: center;
  /* making the image responsive */
  max-width: 100%;
  height: auto;
}

如果这不起作用，请尝试删除 :before 伪元素

#my_div
{
  /* displaying the image */
  content: url("img path");
  /* centering the image */
  display: block;
  text-align: center;
  /* making the image responsive */
  max-width: 100%;
  height: auto;
}

在不查看 html 上下文的情况下，这是我可以提供的最佳解决方案。我们需要更多信息才能更好地了解您的情况。