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!
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeimg{
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.
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
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