Responsive image

Question

How to do the effect below little by little, according to the screen resolution.

*Without using clip, because otherwise would be many media queries, and on this site, the effect seems a smooth transition.

CSS:

    /* lista de notícias */
.chamada {
    border-bottom: 1px dotted #ccc;
    display: block;
    margin-bottom: 1em;
    padding-bottom: 1em;

    text-decoration: none;
    width: 100%;
    overflow: hidden;
}
    .chamada:last-child {
        border-bottom: 0;
    }

    .chamada img {
        border-radius: 5px;
        display: block;
        float: left;
        margin-right: 0.8em;
    }
        .chamada.mini img {
            margin-bottom: 0.4em;
        }
    .chamada:hover h2 {
        text-decoration: underline;
    }

    .chamada.principal h2 {
        font-size: 1.8em;
        line-height: 1.05;
    }
    .chamada.normal h2 {
        font-size: 1em;
    }
    .chamada.secundaria h2 {
        font-size: 0.6em;
    }
    .chamada.mini {
        padding-right: 0.35em;
    }
        :not(.mini) .chamada.mini + .mini {
            padding-left: 0.35em;
            padding-right: 0;
        }


/* direita da TV */
.chamada.tv {
    border: 1px solid #ccc;
    border-radius: 5px;
}
    .tv img {
        border-radius: 3px 3px 0 0;
        margin-top: -1px;
    }
    .tv p {
        clear: both;
        color: #999;
        padding: 1.4em 1em 0.25em;
    }
    .tv h2 {
        padding: 0 1em;
        margin: 0;
        border: 0;
    }
    .tv .bolinha {
        display: inline-block;
        border-radius: 50%;
        background: #aaa;
        height: 7px;
        width: 7px;
        margin-top: 1.4em;
        }
        .tv .bolinha:first-of-type {
            background: #555;
            margin-left: 1.5em;
        }

HTML

<a href="video.html" class="tv chamada normal famosos">
    <img src="img/tv1.jpg" alt="Roupão">
</a>

*Classes are also used by other elements within the link

Donwload of the project:

https://mega.nz/#F! 3t0hHZoL

Answer 1

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

img{ width: 50%; }

This way your image will always be at 50% of the main block, the block can be a Section or even the pure screen of the browser. the rest and only adjust with media Queries.

Answer 2

You can use the srcset attribute from 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 kind of works 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 delivers responsive images very efficiently is cloudinary, in addition to delivery, it has Apis in various languages (Java, PHP, javascript, etc)

http://cloudinary.com/

Urls are dynamic and you can apply various types of crops and resizes, rather than having to generate all versions manually

More details

https:/responsiveimages.org/

Answer 3

The responsive image idea follows the concept of responsive design: serve the user the content view based on the display settings of your device.

Since css still doesn’t make it possible to natively meet all the different visualization measures of such a large number of devices the way is to create break-points (break points) to apply different rules.

Top frameworks with a responsive design focus don’t even have as many break-points so three or four rules are enough.

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

Assuming that the website|project has three different images serving three types of measures example: image-large.jpg for large resolutions (or the same original image), image-media.jpg for a medium and image-representationsmall for small resolutions just define in the css that the element img as relative and occupying at most 100% of the container and tag img define 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 occupy 100% of the width of your container.

Following this reasoning would suffice to have three images with a css class to assign a display:none; within media queries so that only the image that fits the current media query is displayed 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) just create a css class for 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 several libraries javascript to work in this direction perhaps the best known is picturefill however the attribute picture and all its variants are not yet supported by all browsers and there is no support in older browsers (although there are javascript libraries to try this "support").

For support reference and more detailed examples for tag usage picture can be found in responsiveimages.org.

Answer 4

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

To solve the problem that I had in this case, it was enough that the parent element to the image, in this case the <a>had the property position:relative, then to the element <img>, we would add the following CSS properties:

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%;
}

• Max-width/height may not necessarily be 110%, but it was a good measure that I found.
• This also ensures the "smooth transition effect" of resizing the parent element