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

sannoy

Haslan

sannoy

Haslan

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