Adapt css to viewport

Asked

Viewed 61 times

0

How do I adapt my website to the size of ViewPort?
I have a good resolution image and I would like it to adapt to the screen size, without the scrollbar.

css responsive-layout

2 answers

1

I couldn’t understand your doubt 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 fix a maximum size for the image, just insert it into a container, for example:

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

1

For responsive layouts it is necessary to use meta tag viewport, this is an example that I use a lot on my responsive websites:

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

But you have to see the parameters needed to meet the needs of your project. Read this article to learn more: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

On the image you can put like this in your CSS file:

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

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

Browser other questions tagged css responsive-layout

You are not signed in. Login or sign up in order to post.