2

Estou com a seguinte dúvida:

Tenho a seguinte imagem em um arquivo PSD.

Estou utilizando Bootstrap para desenvolver o sistema, porém precisava que esta imagem fosse feita com CSS e ficasse responsivo.

Alguma sugestão ?

Obrigado!

0

2 Respostas 2

1
img{
    width: 100%;
    max-width: 300px; /* coloque aqui o tamanho real da imagem em px */
}

Assim a imagem vai se adequar ao seu box, porém seu box também deve estar 100%.

Exemplo:

<div style="width: 100%">
   <img style="width: 100%; max-width: 300px;" src="imagem.png">
</div>

Fiz CSS Inline para te mostrar, mas pode ser do outro jeito.

4
  • Então Diego, até funciona! Porém os textos seriam variáveis, precisava que os textos se ajustassem conforme a página fosse redimensionada. 22/09/2015 às 14:11
  • 2
    Use media queries, ou deixe a fonte também com 100%. font-size: 100%. Você não explicou isso na sua pergunta, só falou de imagem... 22/09/2015 às 14:15
  • ola, tens de fazer isso a la pata...@media screen and (max-width: 640px) { } algo deste genero e coloca este codigo que queres
    – usersantos
    22/09/2015 às 14:18
  • o uso de media queries pode resolver seu problema
    – DiChrist
    15/02/2016 às 17:07
0

O que se pode fazer é definir a imagem com essas propriedades.

img{
width:100%;
height:auto;
}

Assim ocupará toda a largura do elemento que a contém. Para poder limitar esse tamanho da imagem quando em telas maiores ou menores você poder usar grid view. Dê uma olha em : https://www.w3schools.com/css/css_rwd_grid.asp

E como já foi falado podem também usar media queries

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 .