Ir para conteúdo
Victor Lopes

ajuda !! Como Ajustar imagem no HTML pro lado esquerdo ?

Por , em Desenvolvimento frontend

Recommended Posts

Victor Lopes    0

Victor Lopes
Postado

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%" />

 

 

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

ShadowDLL    2

ShadowDLL
Postado

Segue exemplo:

CÓDIGO: 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<title>Example</title>

		<style>
		/* RESET */
		* {
			padding: 0;
			margin: 0;
		}

		/* BODY, HTML */
		body {
			background-color: #de0920;
		}
		html, body {
			height: 100%;
		}

		/* CARD */
		.card {
			background-color: #a0a0a0;
			color: #ffffff;
			display: flex;
			margin: 20px auto;
			width: 90%;
		}
		.card .sub {
			max-height: 250px;
		}
		.card .sub.image {
			background-color: #000;
			flex: 1;
		}
		.card .sub.image img {
			width: 100%;
			height: 100%;
		}
		.card .sub.description {
			padding: 10px 10px;
			color: #000000;
			flex: 2;
		}
		.card .sub.description p {
			padding: 10px 0;
			text-align: justify;
		}
		</style>
	</head>

	<body>
		<div class="card">
			<div class="sub image">
				<img src="http://placehold.it/900x450" alt="Example" />
			</div>

			<div class="sub description">
				<h2>EXAMPLE</h2>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsum inventore harum, necessitatibus, error vitae rem, perspiciatis quibusdam dolor possimus non illo. Quaerat tenetur eaque pariatur minima, cupiditate odit, libero!</p>
			</div>
		</div>
	</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Sapinn
      Preview de multiplos arquivos com inputs diferentes
      Por Sapinn
      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);     } }  
    • clovis.sardinha
      Problema de imagem
      Por clovis.sardinha
      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.
       
       

       

    • stefanyprs
      Não estou conseguindo mudar a imagem de acordo com a hora apresentada no if/else.
      Por stefanyprs
      //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 */ }
    • Wanderson Moreira
      Imagem saindo deitada no PDF (dompdf)
      Por Wanderson Moreira
      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?
    • FabianoSouza
      Tag IMG aparecendo com borda no Firefox
      Por FabianoSouza
      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;}  
       
       
×

Informação importante

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

  Aceito