CSS Problema com css. Ajustar borda em volta da imagem.

Haslan · 1 de outubro de 2020

Como resolvo esse problema?

A imagem fica muito grande quando eu abro a página, ai quando eu altero a % da altura e largura a borda não acompanha.

sannoy · 1 de outubro de 2020

Use as ferramentas de desenvolvedor do navegador e inspecione a imagem.

Precisaríamos do .html referente a esta página para poder te ajudar mais.

Se você está utilizando <img/> para mostrar a imagem, basta colocar uma class="" ou id="" e depois utilizar o css para fazer o estilo usando o valor que passou para class="" ou id="".

Exemplo:

HTML

<img id="imageID" src=""/>

CSS

#imageID {
	/*Stylesheets*/
}

Espero ter lhe ajudado em algo, até mais!

Haslan · 1 de outubro de 2020

@sannoy

<!DOCTYPE html>

<head>

<title>Tudo sobre Google Glass</title>

</head>

<body>

<h1>Google Glass</h1>

<h2>A revolução do Google está chegando</h2>

</hgroup>

</figure>

Menu Principal

- Home

- Especificações

- Fotos

- Multimídia

- Fale conosco

</header>

<hgroup><h3>Tecnologia > Inovações</h3>

<h1>Saiba tudo sobre o Google Glass</h1>

<h2>por Hendrio Leão</h2>

<h3>Atualizado em 01/Out/2020</h3>

</hgroup>

<p style="text-align: justify;text-indent: 50px;"><span style="font-weight: bolder;">O Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos

usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.

</p>

<h3>Google Glass</h3>

Uma nova maneira de ver o mundo.

</figcaption>

</figure>

</br><h2>Data de lançamento</h2>

<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.

</p>

<h2>Especificações Técnicas</h2>

<br>Tabela Técnica do Google Glass Mar/2013</br>

Tela:Resolução equivalente a tela de 25"</br>

Camera: 5MP para fotos / 720p para vídeos</br>

Conectividade: Wi-Fi/ Bluetooth</br>

Memória Interna: 12GB</br>

</p>

<h2>Como funciona</h2>

<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça

</p>

<h2>O que você pode fazer com o Google Glasses</h2>

<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.

</p>

[AQUI ENTRA UM VÍDEO]

<h2>Outras Notícias</h2>

Vídeo mais recente

[AQUI ENTRA UM VÍDEO]

<h2>Novidades no Glass</h2>

<p style="text-align: justify;text-indent: 50px">O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.

Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.

</p>

Instagran

</div>

</body>

</html>

adicionado 9 minutos depois

aqui eu troquei pra absolute, mas ficou na frente das imagens.

sannoy · 1 de outubro de 2020

@Haslan Olá,

Testei e funcionou:

CSS:

#interface img {
	border: 2px solid red;
}

HTML:

<!DOCTYPE html>

<html lang="pt-BR">

  <head>
    <meta charset="UTF-8">
    <title>Tudo sobre Google Glass</title>
    <link rel="stylesheet" type="text/css" href="-estilo-css/-index-2-estilo.css">
  </head>
  <body>
    <div id="interface">

      <header id="cabecalho">
        <hgroup>
          <h1>Google Glass</h1>
          <h2>A revolução do Google está chegando</h2>
        </hgroup>

        <figure>
          <img src="-imagens/ocu.png.png"/>
        </figure>
        Menu Principal

        - Home

        - Especificações

        - Fotos

        - Multimídia

        - Fale conosco
      </header>

      <hgroup><h3>Tecnologia > Inovações</h3>

        <h1>Saiba tudo sobre o Google Glass</h1>

        <h2>por Hendrio Leão</h2>

        <h3>Atualizado em 01/Out/2020</h3>
      </hgroup>



      <h2>O que é</h2>

      <p style="text-align: justify;text-indent: 50px;"><span style="font-weight: bolder;">O Google Glass</span>  é um acessório em forma de óculos que possibilita a interação dos

        usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeo&shy;confe&shy;rênci&shy;as. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.

      </p>



      <figure class="foto-legenda">

        <img src="-imagens/cava.jpg" width="556px" height="auto" />



        <figcaption>

          <h3>Google Glass</h3>

          Uma nova maneira de ver o mundo.

        </figcaption>



      </figure>



      </br><h2>Data de lançamento</h2>

    <p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.

    </p>




    <h2>Especificações Técnicas</h2>

    <br>Tabela Técnica do Google Glass Mar/2013</br>



  Tela:Resolução equivalente a tela de 25"</br>

Camera: 5MP para fotos / 720p para vídeos</br>

Conectividade: Wi-Fi/ Bluetooth</br>

Memória Interna: 12GB</br>

</p>



<h2>Como funciona</h2>

<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça

</p>



<h2>O que você pode fazer com o Google Glasses</h2>

<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.

</p>



[AQUI ENTRA UM VÍDEO]



<h2>Outras Notícias</h2>

Vídeo mais recente



[AQUI ENTRA UM VÍDEO]



<h2>Novidades no Glass</h2>

<p style="text-align: justify;text-indent: 50px">O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.

  Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.

</p>



Copyright 2020 - by Hendrio Leão

Instagran

</div>
</body>
</html>

Obs.: O tamanho em <img/> foi porque a imagem que usei era 4k não tinha uma menor...

adicionado 5 minutos depois

31 minutos atrás, Haslan disse:

adicionado 9 minutos depois

aqui eu troquei pra absolute, mas ficou na frente das imagens.

Ok, o CSS ficaria assim então:

#interface > figure img {
	border: 2px solid red;
}

Espero ter lhe ajudado, até mais!

Haslan · 1 de outubro de 2020

@sannoy muito obrigado.

Entrar

CSS Problema com css. Ajustar borda em volta da imagem.

Posts recomendados

Haslan

Link para o comentário

Compartilhar em outros sites

sannoy

Link para o comentário

Compartilhar em outros sites

Haslan

Link para o comentário

Compartilhar em outros sites

sannoy

Link para o comentário

Compartilhar em outros sites

Haslan

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos