8

Como fazer o efeito abaixo aos poucos,de acordo com a resolução da tela.

*Sem usar clip, pois senão seriam muitas media queries, e neste site, o efeito parece uma transição suave.

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>

*As classes também são utilizadas por outros elementos dentro do link

Donwload do projeto:

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

10
  • 1
    Não é mais simples usar a imagem como background do elemento e definir background-size: cover? Com html e css... acho que vai ser preciso gambiarra :) coloca a parte relevante do html também. Commented 5/09/2016 às 13:29
  • ficaria mais difícil pro back alterar a imagem de acordo com a notícia Commented 5/09/2016 às 13:40
  • e não é utilizado nenhum tipo de gambiarra, tanto que este projeto foi enviado por um professor de design responsivo apenas com html e css, este é o único estilo aplicado Commented 5/09/2016 às 13:43
  • Me referi a "cortar a imagem". Commented 5/09/2016 às 13:45
  • 1
    Se escutar o que o @renan falou no começo, vai funcionar. E não vejo dificuldade de alterar a imagem de acordo com a notícia.... é só por o css inline. Commented 8/09/2016 às 20:35

5 Respostas 5

6
+25

Supondo que você deseja que a imagem se reduza com o redimensionamento da pagina se focando em design responsivo, Basta usar porcentagens % no width.

img{ width: 50%; }

Dessa forma sua imagem ficara sempre a 50% do bloco principal, o bloco pode ser uma section ou ate mesmo a tela pura do browser. o resto e só ajustar com media Queries.

5
  • Mas assim ele não vai estar se referindo ao elemento pai ? no caso, se ele estiver dentro de uma div interna ao container, ele vai se redimensionar de acordo com a div... não é ? Commented 9/09/2016 às 0:15
  • Use um position absolute que ele passa se basear no tamanho da janela do navegador igual mostro na print abaixo. prnt.sc/cfu020
    – jorge
    Commented 9/09/2016 às 0:30
  • Segundo exemplo mostrando a imagem seguindo o tamanho do navegador prnt.sc/cfu2rz
    – jorge
    Commented 9/09/2016 às 0:39
  • Aqui o código html prnt.sc/cfu3ei
    – jorge
    Commented 9/09/2016 às 0:42
  • Não é isso :/ mesmo sendo muito bom, não é do jeito que eu falei :/ Commented 14/09/2016 às 15:09
3

A ideia de imagem responsiva segue o conceito de design responsivo: servir ao usuário a visualização do conteúdo baseado nas configuração de exibição de seu dispositivo.

Como css ainda não possibilita nativamente atender a todas as diferentes medidas de visualização de um número tão grande de dispositivos o jeito é criar break-points (pontos de quebra) para aplicar regras distintas.

Os principais frameworks com foco em design responsivo nem tem tantos break-points assim, três ou quatro regras já são o suficiente.

Más inevitavelmente se o foco é reduzir carga de download do usuário na hora de exibir imagens e com isso diminuir o tempo de carregamento da página em dispositivos de capacidade de visualização menores o jeito é ter mais de uma fonte para mesma imagem.

Supondo que o site|projeto tenha três imagens diferentes servindo três tipos de medidas exemplo: imagem-grande.jpg para resoluções grandes (ou a imagem original mesmo), imagem-media.jpg para uma resulução média e imagem-pequena para resoluções pequenas basta definir no css que o elemento img como relativo e que ocupe no máximo 100% do container e na tag img definir um width igual a 100% exemplo:

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

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

Isso faria a image ocupar 100% da largura de seu container.

Seguindo este raciocínio bastaria ter três imagens com uma classe css para atribuir um display:none; dentro de media queries fazendo assim com que apenas a imagem que se enquadre na media-query corrente seja exibida exemplo:

// 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%">

Caso queira atribuir um efeito para transição (caso o usuário redimensione) basta criar uma classe css para tal como por exemplo:

// 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%">

Também existem diversas bibliotecas javascript para trabalhar neste sentido talvez a mais conhecida seja picturefill contudo o atributo picture e todas as suas variantes ainda não é suportado por todos os navegadores e não ha suporte em navegadores mais antigos (embora existam bibliotecas javascript para tentar dar este "suporte").

Para uma referencia a suporte e exemplos mais detalhados para o uso da tag picture podem ser encontrados em responsiveimages.org.

2
  • mas a transição é automática, conforme dito e mostrado no projeto, não tem um transition, a imagem é cortada variando entre as dimensões ... Commented 13/09/2016 às 13:39
  • Se a imagem só tem um source não acredito que se enquadre no conceito "responsividade". E o link que você partilhou não possui a chave de decriptografia... ai fica difícil ver o código e dar uma resposta mais precisa. Commented 14/09/2016 às 12:24
1

Você pode usar o atributo srcset do html5, nesse caso você precisa ter 'versões dessa imagem', dessa maneira, o navegador irá apenas baixar a imagem de acordo com a resolução da tela.

Funciona mais ou menos assim.

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

Um bom serviço que te entrega imagens responsivas de forma muito eficiente é o cloudinary, além da entrega, ele tem APIs em diversas linguagens (Java, PHP, javascript, etc)

http://cloudinary.com/

As urls são dinamicas e vc pode aplicar diversos tipos de crops e resizes, ao invés de ter que gerar todas as versões manualmente

Mais detalhes

https://responsiveimages.org/

1
  • eles não usam srcset... baixa o projeto que você vai ver e talvez entender o que eu to falando, vai baixando a resolução até o mobile Commented 11/09/2016 às 19:44
-2

Bom, após muito tempo de estudo, (e porque só lembrei agora), encontrei a solução para o problema com as imagens responsivas.

Para resolver o problema que eu tinha neste caso, bastava que o elemento pai à imagem, no caso o <a>tivesse a propriedade position:relative, em seguida, ao elemento <img>, adicionaríamos as seguintes propriedades CSS:

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%;
}
  • O max-width/height não necessariamente deve ser 110%, mas foi uma boa medida que encontrei.
  • Isso também garante o "efeito de transição suave" de redimensionamento do elemento pai
-4

eu sempre uso object-fit: cover; ele ajusta o tamanho da imagem dentro do componente img

Assim vc pode setar um valor customizado no img, e o src sempre vai respeitar esse dimencionamento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .