Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Diego Hélio da Silva

Tela Completa com 1 Imagem e 1 Div

Por , em Desenvolvimento frontend

Recommended Posts

Diego Hélio da Silva    0

Diego Hélio da Silva
Postado

Boa noite pessoal, preciso de uma enorme ajuda! Deve parecer fácil para alguns, mas preciso fazer a seguinte estrutura, pegar widht 100% da página e utilizar 649px para uma imagem e o resto preencher com preto;



Ex:



Imagem com 649 pixel


<img src="data/imagens/fundo.png" /><div style="widht:resto_da_width_a_direita"></div>



Simplificando preciso colocar uma imagem posicionada a esquerda da tela ocupando 649px e o restante a direita preencher com preto, não poss utilizar background-color: black; porque a imagem é PNG, contem partes transparentes, onde utilizando o fundo preto estaria preenchendo as partes transparentes.



Agradeço desde já quem puder me ajudar. Obrigado.



Att: Diego Hélio.


Compartilhar este post

Link para o post
Compartilhar em outros sites

goodeathx    8

goodeathx
Postado

Consiga a resolução da sua tela do navegador, e divida 649 por ela.

 

Ex: Minha tela tem 1270px, divido 649 por 1270. Resulta em 0,51102362204724409448818897637795. Logo equivale a 51.102362204724409448818897637795% da minha tela. Faça na calculadora, e não arredonde, e caso arredonde, seja pra menos para não haver futuros problemas e você não conseguir identificar. Todo o resto vai ser sua área preta.

 

1 - 0,51102362204724409448818897637795 = 0,48897637795275590551181102362205 multiplicando por 100 temos aproximadamente 48.8%

Compartilhar este post

Link para o post
Compartilhar em outros sites

PetrusHenrique    5

PetrusHenrique
Postado

Desta forma não fica estendida a todos as resoluções.

 

Se eu entendi bem o que você quer, isso vai funcionar para você.

 

 

<body style="background:black;">

<div style="float:left;width:649px;background:white;">

<img src="data/imagens/fundo.png" />

</div>

</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

goodeathx    8

goodeathx
Postado

Desta forma não fica estendida a todos as resoluções.

 

Se eu entendi bem o que você quer, isso vai funcionar para você.

 

 

<body style="background:black;">

<div style="float:left;width:649px;background:white;">

<img src="data/imagens/fundo.png" />

</div>

</body>

 

@LastK Se você ver, ele falou que o fundo não poder ser preto, pois a imagem é PNG, transparente. Além do que, ela vai se adequar todas as resoluções, por isso fiz uma cálculo de porcentagem. A porcentagem é relativa e não absoluta, logo conclui-se que se a tela aumentar, os 51% vão valer mais que 649px, de fato, mas vai ocupar o mesmo espaço, na mesma proporção. O chamado design responsivo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Não é necessário utilizar o "background: black;", mas também não espere milagres de um .PNG com menos de 1000 pixels. Você já pensou em criar divs para cumprir essa função? O CSS consegue auxiliar tudo o que você imaginar.

Tente um HTML semelhante a isso:

<!DOCTYPE html>
<html>
<head>
    <!-- Suas declarações aqui -->
</head>
<body>
<div class="img_esquerda">
    <img src="link da imagem" />
</div>
<div class="restante_preto">
    <!-- Conteúdo -->
</div>
</body>
</html>

Assim, você consegue ajustar pelo CSS a imagem dentro da div, sem que o background o preencha. Você também pode adicionar uma div abaixo dessa imagem e adicionar um fundo a ela, sem ter a necessidade da criação da segunda div a direita.

<!DOCTYPE html>
<html>
<head>
    <!-- Suas declarações aqui -->
</head>
<body>
<div class="img_esquerda">
    <img src="link da imagem" />
</div>
</body>
</html>

CSS:

html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.img_esquerda{
width: 000px; /* Adicione aqui o tamanho da div que contém a imagem */
height: 100%; /* Idem ao anterior, se preferir que não ocupe tudo */
float: left; /* Aqui diz onde ela ficará */
position: absolute; /* Isso você pode alterar, só um exemplo mesmo. */
}

.img_esquerda img{
width: 000px; /* Largura da sua imagem */
height: 000px; /* Altura da sua imagem */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito