Adapt css to viewPort

For responsive layouts it is necessary to use the meta tag viewport, this is an example that I often use in my responsive sites:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

However you have to see the parameters needed to meet the needs of your project. Read this article to learn more: link

On the image you can put it in your CSS file:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

If you post the code as you are doing, I can help you better clarify your doubts.

I was not able to understand your question very well, but I believe it is to leave the image adapted to the exact size of the screen.

.minha-imagem {
    max-width: 100%;
    width: 100%;
    height: auto;
    overflow: hidden; /* para não exibir scrollbar */
}

And if you want to set a maximum size for the image, simply insert it inside a container, for example:

<div style="max-width:500px;">
    <img src="..." />
</div>