How to leave a responsive image without the use of frameworks?

Navigation
2

I have the following question:

I have the following image in a PSD file.

I'm using Bootstrap to develop the system, but I needed this image to be made with CSS and to be responsive.

Any suggestions?

Thank you!

    
asked by anonymous 22.09.2015 / 16:03

2 answers

1
img{
    width: 100%;
    max-width: 300px; /* coloque aqui o tamanho real da imagem em px */
}

So the image will fit your box, but your box should also be 100%.

Example: 

<div style="width: 100%">
   <img style="width: 100%; max-width: 300px;" src="imagem.png">
</div>

I did CSS Inline to show you, but it could be the other way.

    
22.09.2015 / 16:08
0

What you can do is define the image with these properties. 

img{
width:100%;
height:auto;
}

This will take up the entire width of the element that contains it. In order to be able to limit this size of image when in bigger or smaller screens you can use grid view. Take a look at: link

As already mentioned, you can also use media queries

    
31.05.2017 / 11:59
Login with facebook in javaScript How to open another viewControler in Swift?