Responsive picture

Well, after a long time of study, (and because I just remembered now), I found the solution to the problem with responsive images.

In order to solve the problem I had in this case, it was enough if the parent element in the image, in case <a> had the property position:relative , then the <img> element would add the following CSS properties: / p>

img{
   position:absolute;
   /* isso centraliza a imagem no elemento pai */
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
   /* As três propriedades seguinte a tornam responsiva */
   min-width:100%;
   /* Para que isso funcione, o elemento pai deve ter um height fixo, para isso, as vezes utilizo o javascript, mas dependendo do elemento, pode-se apenas utilizar css diretamente */
   min-heigth:100%;
   /* e por fim, para que a imagem não estoure demais, caso seja enorme, coloco algo como: max-width ou max-height, dependendo das dimensões da imagem */
   max-height:110%;
}

• The max-width / height should not necessarily be 110%, but it was a good measure I found.
• This also guarantees the "smooth transition effect" of parent element resizing

Assuming you want the image to be reduced by resizing the page by focusing on responsive design, just use percentages% in width.

img{ width: 50%; }

In this way your image will always be 50% of the main block, the block can be a section or even the pure browser screen. the rest and only adjust with Media Queries.

You can use the srcset attribute of html5, in which case you need to have 'versions of this image', so the browser will only download the image according to the screen resolution.

It works more or less like this.

<img 
      src="imagem-fallback.jpg" 
      srcset="imagem-mobile.jpg 480w, 
              imagem-desk.jpg 1024w, 
              imagem-desk-retina.jpg 1024w 2x" />

A good service that gives you responsive images in a very efficient way is cloudinary, in addition to delivery, it has APIs in several languages (Java, PHP, javascript, etc.)

link

Urls are dynamic and you can apply different types of crops and resizes, instead of having to generate all versions manually

Moredetails

link

The idea of responsive image follows the concept of responsive design: to serve the user the visualization of the content based on the display configuration of his device.

As css still does not natively enable all the different measures of visualization of such a large number of devices the way is to create break-points (breakpoints) to apply different rules.

The main frameworks with a focus on responsive design do not have as many break-points so three or four rules are enough.

More inevitably if the focus is to reduce user download load when displaying images and thereby decrease page load time on smaller display devices the way to have more than one source for the same image is

Assuming that the project site has three different images serving three types of measures example: image-large.jpg for large resolutions (or the original image itself), image-media.jpg for a medium and small image for small resolutions just set in css that the img element is relative and that occupies at most 100% of the container and in the img tag set a width equal to 100% example:

// css
img{
  position:relative;
  max-width:100%;
}

// e no html (img)
<img src="imagem-grande.jpg" width="100%">

This would make the image take up 100% of its container width.

Following this reasoning, it would be enough to have three images with a css class to assign a display:none; inside the media queries so that only the image that fits in the current media-query is shown example:

// ocultar todas as classes preventivamente
.big-image,.large-image,.small-image{
   display: none;
}

@media (min-width: 640px) {
   .big-image,.large-image{
      display: none;
   }
   .small-image{
      display: block;
   }
}
@media (min-width: 992px) {
   .big-image,.small-image{
      display: none;
   }
   .large-image{
      display: block;
   }
}
@media (min-width: 1200px) {
   .large-image,.small-image{
      display: none;
   }
   .big-image{
      display: block;
   }
}


// e no html seria algo como:
<img src="imagem-grande.jpg"  class="big-image"   width="100%">
<img src="imagem-media.jpg"   class="large-image" width="100%">
<img src="imagem-pequena.jpg" class="small-image" width="100%">

If you want to assign an effect to transition (if the user resizes) simply create a css class such as:

// regular o tempo do efeito de transição
.transition{
    transition: all 1.0s;
}

// no html basta adicionar esta classe ex:
<img src="imagem-grande.jpg"  class="transition big-image"   width="100%">
<img src="imagem-media.jpg"   class="transition large-image" width="100%">
<img src="imagem-pequena.jpg" class="transition small-image" width="100%">

There are also a number of javascript libraries to work on in this sense, perhaps the best known being picturefill however the picture attribute is all its variants are not yet supported by all browsers and are not supported in older browsers (although there are javascript libraries to try to give this "support").

For a reference to support and more detailed examples for using the picture tag can be found at responsiveimages.org .