How do I make an image go beyond the limits of a DIV

Question

How do I make an image go beyond the limits of a DIV

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm having difficulty putting a 100% image on the mobile screen, which has a margin in the previous DIV, I've tried changing the position, overflow and float but I can not get past this margin. follows an example

.teste{
	margin: 20px auto;
	width: 1000px;
	height: 300px;
	background-color: blue;
	text-align: center;
}
.teste1{
	background-color: red;
	text-align: center;
	width: 1200px;
	height: 200px;
}

<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
	<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
	<div class="teste">
		<div class="teste1">
			
		</div>
		<div class="teste2">
			
		</div>
	</div>
</body>
</html>

In case it would exceed the red div over the margin used in the blue div.

css posicionamento

asked by anonymous 21.07.2018 / 20:29

3 answers

events.js: 72 error - Error running my first global app with express Why does the Scanner return an error in something that is expected?

score 0 · Answer 1

For this case, use in your CSS:

.teste1{
    /* Display inline block trava a imagem na tela */
    display: inline-block;
    background-color: red;
    text-align: center;
    width: 1200px;
    height: 200px;
}

score 0 · Answer 2

I would do it differently, would create a div called .container and for this would put a margin of 20px auto. This way you can extend the image across the width and when you want the element to be within the margin of 20px you encapsulate it with the div .container. Example

<div id="main">
   <div id="imagem">
      <img src="nome.png" />
   </div>
   <div id="texto">
      <div class="container">
         Texto
      </div>
   </div>
</div>

<style>
   #main{width:100%;}
   #imagem img {width:100%}
   .container{margin: 20px auto;}
</style>

score 0 · Answer 3

You can do something like this in css:

.teste{
  margin: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

@media (max-width: 600px){
  .teste{
    margin: 0px;
    /*Aqui é onde vc vai tirar a margem do campo que precisa*/
  }
}

<div class="teste"></div>