Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''img''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento Web
    • Desenvolvimento frontend
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets e outros ambientes
    • Desenvolvimento com Wordpress
    • Desenvolvimento de apps
    • Desenvolvimento ágil
    • Desenvolvimento de Games
    • Banco de Dados
    • Design e UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • Boteco iMasters

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 9 registros

  1. Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input. Meu codigo: CSS: *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ background-color: #f5f8ff; } .container{ background-color: #ffffff; width: 60%; min-width: 450px; position: relative; margin: 50px auto; padding: 50px 20px; border-radius: 7px; box-shadow: 0 20px 35px rgba(0,0,0,0.05); } input[type="file"]{ display: none; } label{ display: block; position: relative; background-color: #025bee; color: #ffffff; font-size: 18px; text-align: center; width: 300px; padding: 18px 0; margin: auto; border-radius: 5px; cursor: pointer; } .container p{ text-align: center; margin: 20px 0 30px 0; } #images{ width: 80%; position: relative; margin: auto; display: flex; justify-content: space-evenly; gap: 20px; flex-wrap: wrap; } figure{ width: 45%; } img{ width: 100%; } figcaption{ text-align: center; font-size: 2.4vmin; margin-top: 0.5vmin; } HTML: <div class="container"> <input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple> <label for="file-input"> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p id="num-of-files">Nenhum arquivo escolhido</p> <div id="images"></div> </div> <div class="container"> <input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple> <label for="file-input"> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p id="num-of-files">Nenhum arquivo escolhido</p> <div id="images"></div> </div> JAVASCRIPT: let fileInput = document.getElementById("file-input"); let inputFile = document.querySelectorAll("#file-input"); let imageContainer = document.getElementById("images"); let numOfFiles = document.getElementById("num-of-files"); function preview(input){ imageContainer.innerHTML = ""; numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`; for(i of fileInput.files){ let reader = new FileReader(); let figure = document.createElement("figure"); let figCap = document.createElement("figcaption"); figCap.innerText = i.name; figure.appendChild(figCap); reader.onload=()=>{ let img = document.createElement("img"); if(figCap.innerText.split('.').pop() == 'pdf'){ img.setAttribute("src","pdf.png"); }else{ img.setAttribute("src",reader.result); } figure.insertBefore(img,figCap); } imageContainer.appendChild(figure); reader.readAsDataURL(i); } }
  2. clovis.sardinha

    Problema de imagem

    Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois. Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax. No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem. a página mostrada é esta: <div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este: /* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; } Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada) Coisa interessante: tanto faz colocar ../imagens/foto.png ou imagens/foto.png e funciona no local e não no servidor. Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
  3. //modelo.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hora do dia</title> <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()"> <header> <h1> Hora do dia </h1> </h1> </header> <section> <div id="msg"> msg </div> <div id="foto"> <img class="imagem" src="fotomanha.jpg" alt="foto do dia"> </div> </section> <footer> <p>&copy; Rodapé </p> </footer> <script src="script.js"></script> </body> </html> //script.js function carregar () { var msg = window.document.getElementById('msg') var img = window.document.getElementsByClassName('imagem') var data = new Date() var hora = data.getHours() msg.innerHTML = 'Agora são ' + hora + ' horas' if (hora >= 0 && hora < 12){ //Bom dia img.src = 'fotomanha.jpg' } else if (hora >= 12 && hora < 18){ //Boa tarde img.src = 'fototarde.jpg' } else { //Boa noite img.src = 'fotonoite.jpg' } } //estilo.css body{ background-color: aqua; font: normal 15pt Arial; } header{ color:rgb(255, 255, 255); text-align: center; } section{ background: white; border-radius: 10px; padding: 15px; width: 500px; margin:auto; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); } footer{ color:white; text-align: center; font-style: italic; } div{ text-align: center; } .imagem{ width: 500px; /* largura da imagem */ height: 350px; /* altura da imagem */ margin-top: 10px; /* margem do topo */ }
  4. Wanderson Moreira

    Imagem saindo deitada no PDF (dompdf)

    Opa, blz? Alguém me da um help? Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas. No html as fotos saem com a orientação normal(em pé) conforme foi inserida alguém sabe o que pode ser?
  5. Como colocar uma imagem no html/css sem que a qualidade dela não decaia? Eu fiz os procedimentos abaixo, achando que a coisa pudesse melhorar, porém a imagem horizontalmente fica esticada, toda a resolução se perde. O que eu quero é justamente fazer com que o width fique completo e o height no 300px, porém com uma qualidade boa. A resolução original da imagem é de 1920x1279. .img { width: 100%; height: 300px; background-size: cover; background-position: center right; }
  6. Bom dia, sou iniciante e estou buscando aprender de casa mesmo a programar, e estou com essa duvida !! Tenho uma imagem e quero ajustar ela para o lado Esquerdo, e diminuir ela de tamanho e largura, e quero colocar uma msg do lado da imagem. Exemplo: Uma img PNG de um telefone e colocar o numero do lado da imagem. Sendo que o meu "Align" Não ta indo, fica em Vermelho. Estou usando o Visual Studio Code. Alguém poderia me ajudar ? Minha tag usada: <img src="images/telefone.png" width="10%" height="10%" />
  7. FabianoSouza

    Tag IMG aparecendo com borda no Firefox

    Pessoal, vejam meu print. A tag img é criada "dinamicamente" (com JavaScript). Não sei é por isso que se cria uma espécie de borda em torno da tag. Como removo isso?? Essa borda só aparece no Firefox (no Edge não aparece). Meu CSS já tem isso a img { border: none;}
  8. Vi na internet que para pegar o src de uma imagem se coloca o seguinte código: <form action="/action_page.php"> <input type="file" name="pic" accept="image/*"> <input type="submit"> </form> e isso vai retornar pic="nome do arquivo", o problema é que eu não sei como usar isso com a tag <img> para escolher esse local de arquivo... como eu posso implementar isso? Eu só quero colocar uma imagem qualquer no site através do input file mas não sei como faço...
  9. rodrigoalgeri

    IMAGEM CSS

    BOA NOITE OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X 75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM
×

Informação importante

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