How do images/videos adjust themselves?

Asked

Viewed 104 times

1

Hello, I’m finishing developing an app, I put in it the images with 450px wide, thinking it would work, because currently all devices have at least 480x800 resolution, while compiling I went to test the smartphone with this resolution and the image is great, outside the body.. I don’t know what’s going on, I’m using the code like this:

<div align="center"><img src="imagens/inicio.jpg" class="imagem" /></div><br>

The image class is just to put a shadow.. How do I resize the images according to the device screen?

twitter-bootstrap css3

  • It gets inside the body yes, what it gets outside is the screen limit. You need to learn about responsive layouts.

  • possible duplicate of Responsive Design

  • Yes it is inside the body, but not within the limit that I established for him, the design is responsive, I just faced a small problem with the article’s images.. I used Bootstrap to make them responsive without having to have several images of different sizes.

  • Understood leandro, actually to work in the images it is necessary to add the elements col-*, but may not work properly, the link in my second comment may be the way.

  • Look at the answer as I did

2 answers

3


Well, the solution was simpler than I thought, with the use of bootstrap I was able to do, for this, put the image like this:

<img src="..." class="img-responsive" alt="...">

And in the head page place this bootstrap style sheet

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

0

An approach different from the one presented and without the use of Twitter-Bootstrap would be the use of HTML5 tags.

See the example below (run it in an html file to see the correct result in jsfiddle if you have a reasonably 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 standard image and other images of smaller dimensions to be exchanged when the browser has its size reduced to a value (determined).

More detailed source: Link

Obs: I never used class="img-responsive" but my images have always been resposive, I think that because they are enveloped inside a row, container and wrapper.

  • 1

    Could you tell me why downvote?

  • It’s Ricardo, there’s always someone who doesn’t understand the real goal of the community unfortunately, takes a +1 to compensate.

Browser other questions tagged twitter-bootstrap css3

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