Is it possible to style an image added by the "content" property - css

Question

Here is my code:
#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>
I'm trying to make the image responsive through the max-width:100% property but it is not working
My Question: Is it possible to do such a thing?
Edit
The question is not a duplicate, I want the dimensions to scale automatically on screen resize while the other question sets a fixed size to the image

Answer 1

Try this:
#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;
}
If this doesn't work, try removing the :before pseudo-element
#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;
}
Without seeing the context of your html, this is the best solution I can offer. We'll need more information in order to understand your situation better.

Answer 2

I confess I'm not entirely sure what effect you are after but I think this might be a better option for you.
Don't put the image in the content property...make that pseudo-element 100% size of the div and use a background image.
A couple of options for you.
.my_div {
position: relative;
height: 150px;
border: 1px solid grey;
width: 75%;
margin: 1em auto;
}
.my_div:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-image: url(http://lorempixel.com/g/400/200/);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cover:before {
background-size: contain;
}
<div class="my_div"></div>
<div class="my_div cover"></div>
JSfiddle Demo