COMO TRATAR IMAGEM

Como deixar uma imagem responsiva com bootstrap?

Como deixar uma imagem responsiva com bootstrap?

Basta usar a classe do bootstrap img-responsive ou img-fluid.

A principal diferença entre o img-responsive e o img-fluid é a versão do bootstrap. Até o 3 se usava o img-responsive e depois do 4 o img-fluid.

Uma imagem responsiva serve para se adaptar a largura independente do tamanho da tela ou do navegador. Se adapta desde uma tela de desktop até um smartphone. Veja aqui o que é responsividade.

A classe img-responsive modifica a largura máxima e a altura da imagem adaptando o leiaute para a tela ou elemento pai. Para acompanhar o elemento pai ela usa width: 100% e height: auto.

Por exemplo:

<img src="caminho da imagem" class="img-responsive">

Essa classe é padrão do framework, mas pode ser complementada com outras ou estilos próprios de CSS. Por exemplo para usar a imagem menor que o elemento pai para dividir por texto pode usar o width: 40%, ou para centralizar a imagem use a classe .center-block.

Por padrão a imagem irá ficar limitada ao elemento em que está contida. No caso se tiver usando um grade com col-md-6 a imagem irá ocupar apenas metade do elemento col-md-12.

Entenda melhor isso em como usar as grides do bootstrap.

Veja mais em: 

Como tratar imagens com bootstrap?

Como fazer imagens com cantos arredondados no bootstrap?

Como usar miniaturas de imagens (thumbnails) no bootstrap?

Como carregar uma imagem diferente cada vez que abrir o site?

Como carregar uma imagem diferente cada vez que abrir o site?

Pode ser usado os segundos do PHP para controlar a troca aleatória da imagem de background do CSS.

Pode conferir o efeito recarregando a página.



Além do que já foi mencionado uso if e else para fazer a troca.

ficando algo como:

<?php
          $segundos = date('s')%10;
          if($segundos < 3){
            $imagem = 'php';
          }elseif($segundos >= 3 and $segundos < 5) {
            $imagem = 'css';
          }elseif($segundos >= 5 and $segundos < 8) {
            $imagem = 'html';
          }else{
            $imagem = 'javascript';
          }    
 ?>

No caso é registrado o resto da divisão dos segundos por dez para facilitar o if e deixar a troca da imagem mais rápida.

Também poderia ser usado um array para recuperar a imagem ficando assim:

$arrayImagem = array("php", "css", "javascript", "html", "python", "asp", ".dotnet", "java", "ruby", "perl");
$imagem = $arrayImagem[$segundos];

Se fossem menos de 5 imagens no projeto usaria o if direto, umas 10 o array, agora se tivessem mais, buscaria no banco de dados elas.

Como recuperar dados do banco com PHP?

Para o css é usado algo como:

<style type="text/css" scoped="scoped">
          .banner_area {
              width: 100%;
              height: 100%;
              background: url(./leiaute-site/img/<?php echo $imagem; ?>.jpg) no-repeat center;
          }

</style>

Como fazer imagem rolar para baixo com css?

Como fazer imagem rolar para baixo com css?

Para isso é usado animation e keyframe como no exemplo:

Animation e keyframe são propriedades css usadas em animações.

Segue abaixo o código com o exemplo solicitado na questão:


<div class="body">
<style rel="stylesheet" scoped="scoped" type="text/css">.body{
  background: #ddd; /*Fundo no tom de cinza claro.*/ 
  background-image: url("./confetes-tech.png"); /*Chamada das imagens de confetes.*/
  background-repeat: repeat-y;/*Define que a imagem irá repetir no eixo y, ou seja na vertical.*/
  height: auto;/*Define o tamanho da altura usada em auto.*/
  left: 0;/*Define a posição horizontal da página começando do primeiro pixel.*/
  position: absolute;/*Define a orientação da página, ficando fixa.*/
  top: 0;/*Define o início da página na parte superior,*/
  width: 100%;/*Define a largura da página para ser aproveitada toda.*/
  /*Aqui é definida a animação para rodar em 4 segundos em linha reta sem parar.*/
  animation: snow 4s linear infinite;
  /*Abaixo é feita a mesma configuração de animação para diferentes prefixos de navegadores.*/
  -webkit-animation: snow 4s linear infinite;
  -moz-animation: snow 4s linear infinite;
  -ms-animation: snow 4s linear infinite;
  }
  /*Aqui são definidas as posições da imagem.*/  @keyframes snow {
    /*Primeiro a posição zero da imagem.*/
    0% {background-position: center 0%, center 0%, center 0%;}
    /*Depois a posição final.*/
    100% {background-position: center 1120px, center 1120px, center 1120px;}
  }
  /*Abaixo é feita a mesma configuração de keyfranes para diferentes prefixos de navegadores.*/
  @-moz-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
  }
  @-webkit-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
  }
  @-ms-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
  }
</style>
<div class="container">
<style rel="stylesheet" scoped="scoped" type="text/css">
  .container{
      /*Abaixo é definido o tamanho da tela.*/
      max-width: 600px;
      max-height: 800px;
      width: 600px;
      height: 800px;
      margin: 0 auto;
    }
</style>

</div>
</div>


Ficando igual o exemplo abaixo:


Neste exemplo a imagem vai da posição 0% a 100%, mas poderia ser colocada outras posições como 50% ou 70%. Também poderia ser feito por medida exata em pixels.

No exemplo a imagem vai da posição 0% até a 100% em 4 segundos. Sendo que a última posição a imagem estará em uma altura de 1120px.

Como colocar espaço entre imagens em HTML?

Como colocar espaço entre imagens em HTML?

A melhor maneira de configurar o espaço é com CSS, mas tem como fazer apenas com HTML.

Para isso se usa hspace e vspace com o seu valor em pixel.

Seria algo como:

<img src="caminho da imagem" vspace="5" hspace="5">

O vspace é referente ao espaçamento vertical e o hspace horizontal.

Ele serve para outros elementos também.

Veja clicando aqui como espaçar imagem com css.

Como dar espaço entre imagens em HTML?

Como dar espaço entre imagens em HTML?

A melhor maneira de configurar o espaço é com CSS, mas tem como fazer apenas com HTML.

Como colocar uma imagem em HTML?

Como colocar uma imagem em HTML?

Basta usar a tag img com o caminho especificado no src.

 

Para inserir um imagem em um site é usado a tag em html <img> e inserido o local onde essa imagem se encontra entre as aspas do src ficando algo assim:

<img src="caminho da imagem"> 

O caminho da imagem pode ser um diretório no computador(nesse caso só ira funcionar na máquina local), no servidor onde o site está hospedado ou no host de outro site.

Normalmente na estrutura do site é criado um diretório para receber as imagens com o nome de img, image ou imagens que pode ser na raiz do site ou no diretório assets. Isso é um padrão não é obrigatório.

Veja abaixo alguns exemplos:

 imagem no mesmo diretório do arquivo html sendo usado, pode ser no computador local ou servidor:

<img src="nome-da-imagem.jpg" >

Imagem em hospedada em outro site:

<img src="http://www.outro-site.com.br/imagens/nome-da-imagem.jpg">

Imagem hospedada no diretório em uma camada mais para dentro:

<img src="..assets/assets/nome-da-imagem.jpg">

Imagem localizada em um diretório mais abrangente do site.

<img src="../../img/nome-da-imagem.jpg">

Nesse último exemplo é usado dois pontos ".." e depois barra "/" para voltar do diretório que está o arquivo. Veja mais em como navegador por pastas no terminal ou arquivos.

Note pelos exemplos que as tags img não são fechadas isso ocorre porque quando o elemento não tem filiação não precisa sem fechado. Ou seja a tag img não recebe outros elementos apenas outras tags dentro dela mesmo.

Outras tags que são usadas junto com as imagens normalmente e são muito importantes serem preenchidas, mas não obrigatórias são as tags alt e title que servem para descrever as imagens. Cada uma das duas tags tem sua finalidade.

Esse é o básico para se inserir uma imagem no site, mas pode ser muito mais aprimorado como por exemplo: saber o melhor tamanho de imagens para usar no site, redimensionar imagens com html, tratar o tamanho das imagens com css, usar link em imagem, usar imagem de fundo, trabalhar melhor imagens para ter melhor resultado em seo, saber para que serve a tag alt em imagens, ou para que serve a tag title em imagens, usar filtro css para tratar imagens, inverter cor de imagens com css...

Como aplicar filtro com CSS ao passar mouse na imagem?

Como aplicar filtro com CSS ao passar mouse na imagem?

Basta usar o img:hover.

O :hover não serve apenas para link <a href=""> o efeito é disparado em qualquer elemento quando o mouse passa por cima.

Ficaria algo como:

 img:hover{
     /*aqui se aplica o css.*/
}

Como retirar contorno azul em link de imagens?

Como retirar contorno azul em link de imagens?

Basta usar css no link em todos os estados.

Exemplo:

img a:active, a:selected, a:visited {
    border: none;
    outline: none;
}


Esse contorno é colocado por padrão pelo Chrome.

Com esse css é declarado como sem borda e sem contorno.

botão de compartilhamento whatsapp botão de compartilhamento no twiter botão de compartilhamento do site botão de compartilhamento no linkedin botão de compartilhamento whatsapp