Adjusting image size for smaller sized screens - html

Question

Is there any way to make an image resize to the users screen size? (HTML/CSS)
I've tried Media queries, but they haven't proven very useful except for text I believe.
#media screen and (min-width:600px) {
#dick{
color: black;
z-index: 400;
position:absolute;
left: 58%;
top: 210px;
height: 50%;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:100%;
}
}

Answer 1

Simply making the width span as much as it can works.
img {
width: 100%;
}

Answer 2

You can define a class like resize-img and add this class to your img tag :
<img class="resize-img">
and then in you stylesheet :
#media screen and (min-width:600px) {
.resize-img{
width: 100px;
height:200px;
// and whatever else :d
}
}
#media screen and (min-width:1000px) {
.resize-img{
width: 300px;
height:600px;
// and whatever else :d
}
}

Answer 3

For image elements id.ot provides an answer. For background images, you can use this:
html, body, .column {
padding: 0;
margin: 0;
}
body {
background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw;
font-size: 10vh;
}
h2 {
font-size: 2em;
}
<h1>This is the header</h1>
<p>and some paragraph text</p>
Try to resize the window when using "Full page" view mode and see how the image resizes. If you don't care about distortion, you can even use
background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw 100vh;
By the way, vw and vh units can also be used to resize text (regarding your comment on id.ot's answer).