Resize image to parent div

Question

I have an image with a 600px width.

It needs to be inside a bootstrap col-xs-6 or 12 div with a width of 300px and has to be resized if the screen width is smaller than 300px.

How can I realize that using width and max-width in CSS?

Answer 1

just do this:

img { 
  width: 100%; 
  max-width: 300px; 
  height: auto; 
}

Answer 2

I think this will solve your problem.

img {
    width: 100%;
    max-width: 300px;
}

If the div width is bigger than 300px image will have maximum width of 300px. If div is smaller than 300px image should fill 100% width of div.