How do I get an image to exceed the limits of a DIV

Question

How do I get an image to exceed the limits of a DIV

I'm having difficulty putting a 100% image on the mobile screen, which has a margin in the previous DIV, I've tried to change the position, overflow and float but I can not pass this margin. the following is 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 this case it would exceed the Div in red over the margin used in the Blue div.

0

css posicionamento

Author: Giancarlo Horta, 2018-07-21

Source

4 answers

score 1 · Answer 1

Giancarlo, are you okay?

There are a few ways you can implement this. One of the easiest I believe to solve your problem is to use two css properties: margin and z-index; With margin you can put your div starting on top of the other and the z-index defines which one is ahead and which one is behind.

.teste1 {
 z-index: 2;
 background: red;
 position: relative;
 opacity: 0.8; /* Define uma opacidade para o elemento sobreposto*/
}

.teste2 {
 z-index: 1;
 background: blue;
 margin-top: -10px;
 position: relative;
}

This way you can define the beginning of the Div within the red div, but make it behind. However, the effect will be similar to what already if they do. To give an overlay or transition effect, you can use the opacity of the div, making a transition between blue and red.

score 0 · Answer 2

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 3

I would do it in a different way, create a div called .container and for this would put a margin of 20px auto. In this way you can extend the image over the entire width and when you want the element to be with 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 4

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>