<div align="center"><img src="imagens/inicio.jpg" class="imagem" /></div><br>
The image class is just to put a shadow on it. How do I resize images according to the device screen?
How do you make self-adjusting images / videos?
1
Hello, I'm finishing developing an app, I put the images with 450px wide, thinking that it would work, because currently all devices have at least 480x800 resolution, when compiling I went to test on the smartphone with this resolution and the image gets big , outside the limit of the body .. I do not know what is happening, I am using the code like this:
asked by anonymous 01.06.2015 / 03:19
2 answers
3
Well, the solution was simpler than I thought, with the use of the bootstrap I could do, for this, put the image like this:
<img src="..." class="img-responsive" alt="...">
And in the% of page% put this bootstrap style sheet
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
01.06.2015 / 04:46
0
An approach different from that presented and not using Twitter-Bootstrap would be the use of HTML5 tags.
See the example below (exeute it in an html file to see the correction in the jsfiddle if it has a fairly large monitor):
<picture>
<source
media="(min-width: 650px)"
srcset="http://upload.wikimedia.org/wikipedia/commons/b/b1/2010ChevroletCamaro-05.jpg">
<source
media="(min-width: 465px)"
srcset="http://s2.glbimg.com/TysmL9iPCRj8F5opJUW-p-_AfsY=/620x349/s.glbimg.com/jo/g1/f/original/2013/04/05/camaro-hotwheels01.jpg">
<img
src="http://gruposaodomingos.com.br/site/wp-content/uploads/2015/03/Foto-de-Camaro.jpg"alt="a cute kitten">
</picture>
Here we define a default image and other smaller-sized images to change when the browser has its size reduced to a given value.
More detailed source: Link
Obs: I've never used class="img-responsive" but my images have always been resposible, I think because they are enveloped within row , container and wrapper .
01.06.2015 / 15:17