Responsive image

Asked

Viewed 2,279 times

8

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.

inserir a descrição da imagem aqui

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

  • 1

    It is no longer simple to use the image as background element and define background-size: cover? With html and css... think that will need to gambiarra :) puts the relevant part of html also.

  • it would be harder pro back alter the image according to the news

  • and no kind of gambiarra is used, so much so that this project was sent by a responsive design teacher only with html and css, this is the only style applied

  • I meant "cut the image".

  • so, about cutting the image, it’s only done in css itself and it’s automatic, I’ll put the link to download the folder

  • I don’t understand what you want. you want a div anime when it changes size to hide or not the image ? because its css already with overflow Hidden the image is already hidden

  • So man, the image suffers small cuts, as you must have seen, the image suffers constant cuts only with CSS, wanted to know how it was made, and how it works, because in the course, it came already ready and was not explained

  • 1

    If you listen to what @Renan said at the beginning, it will work. And I don’t see any difficulty in changing the image according to the news.... it’s just because css inline.

  • "the image undergoes small cuts, as you may have seen, the image undergoes constant cuts only with CSS". These cuts are made according to the screen resolution, or the image starts large and decreases, regardless of being on the computer or mobile phone?

  • Download the project you will see, it does not use srcset or anything like that :/ that you find it very strange

Show 5 more comments

4 answers

7


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.

  • But so he will not be referring to the parent element ? in case, if it is inside a div internal to the container, it will resize according to the div... it is not ?

  • Use an Absolute position it passes if it is based on the size of the browser window as shown in the print below. http://prnt.sc/cfu020

  • Second example showing the image following the browser size http://prnt.sc/cfu2rz

  • Here the html code http://prnt.sc/cfu3ei

  • It’s not that :/ even though it’s very good, it’s not the way I said it :/

3

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/

  • they don’t use srcset... download the project you will see and maybe understand what I’m talking about, download the resolution to the mobile

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.

  • but the transition is automatic, as said and shown in the project, does not have a Transition, the image is cropped varying between the dimensions ...

  • If the image has only one source, I don’t believe it fits the concept of "responsiveness". And the link you shared doesn’t have the decryption key... so it’s hard to see the code and give a more accurate answer.

-1

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

Browser other questions tagged

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